[optimize] simplify Internationalization with MobX-i18n 0.7 & other related packages

Author: TechQuery

components/LanguageMenu.tsx

@@ -10,7 +10,7 @@ const LanguageMenu: FC = observer(() => {
   return (
     <Select
       value={i18n.currentLanguage}
-      onChange={key => i18n.changeLanguage(key as typeof i18n.currentLanguage)}
+      onChange={key => i18n.loadLanguages(key as typeof i18n.currentLanguage)}
     >
       {Object.entries(LanguageName).map(([key, name]) => (
         <Option key={key} value={key}>

components/NotFoundCard.tsx

@@ -1,9 +1,10 @@
+import { observer } from 'mobx-react';
 import { ErrorProps } from 'next/error';
 import { FC, useContext } from 'react';
 
 import { I18nContext } from '../models/Translation';
 
-export const NotFoundCard: FC<ErrorProps> = ({ title }) => {
+export const NotFoundCard: FC<ErrorProps> = observer(({ title }) => {
   const { currentLanguage } = useContext(I18nContext);
 
   return currentLanguage.startsWith('zh') ? (
@@ -20,4 +21,4 @@ export const NotFoundCard: FC<ErrorProps> = ({ title }) => {
       src="https://notfound-static.fwebservices.be/en/404?key=66abb751ed312"
     />
   );
-};
+});

models/Translation.ts

@@ -1,26 +1,37 @@
-import { IncomingHttpHeaders } from 'http';
 import {
-  parseCookie,
-  parseLanguageHeader,
+  loadLanguageMapFrom,
   TranslationMap,
   TranslationModel,
 } from 'mobx-i18n';
 import { createContext } from 'react';
 
 import zhCN from '../translation/zh-CN';
 
-export const i18nData = {
+const i18nData = {
   'zh-CN': zhCN,
   'zh-TW': () => import('../translation/zh-TW'),
   'en-US': () => import('../translation/en-US'),
 };
 export type LanguageCode = keyof typeof i18nData;
 
+export interface I18nProps {
+  language: LanguageCode;
+  languageMap: typeof zhCN;
+}
+
 export const createI18nStore = <N extends LanguageCode, K extends string>(
   language?: N,
   data?: TranslationMap<K>,
-) =>
-  new TranslationModel({ ...i18nData, ...(language && { [language]: data }) });
+) => {
+  const store = new TranslationModel({
+    ...i18nData,
+    ...(language && { [language]: data }),
+  });
+
+  if (language) store.currentLanguage = language;
+
+  return store;
+};
 
 export const i18n = createI18nStore();
 
@@ -32,16 +43,4 @@ export const LanguageName: Record<LanguageCode, string> = {
 
 export const I18nContext = createContext(i18n);
 
-export const loadLanguage = async ({
-  'accept-language': acceptLanguage,
-  cookie,
-}: IncomingHttpHeaders) => {
-  const { language } = parseCookie(cookie || ''),
-    languages = parseLanguageHeader(acceptLanguage || '');
-
-  const languageData = await i18n.loadLanguages(
-    [language, ...languages].filter(Boolean),
-  );
-
-  return { language: i18n.currentLanguage, languageData };
-};
+export const loadSSRLanguage = loadLanguageMapFrom.bind(null, i18nData);

package.json

@@ -15,7 +15,6 @@
     "@editorjs/list": "^2.0.8",
     "@editorjs/paragraph": "^2.11.7",
     "@editorjs/quote": "^2.7.6",
-    "@koa/bodyparser": "^5.1.1",
     "@koa/router": "^13.1.0",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
@@ -33,13 +32,14 @@
     "lodash": "^4.17.21",
     "mobx": "^6.13.7",
     "mobx-github": "^0.3.5",
-    "mobx-i18n": "^0.6.0",
+    "mobx-i18n": "^0.7.0",
     "mobx-react": "^9.2.0",
+    "mobx-react-helper": "^0.3.6",
     "mobx-restful": "^2.1.0",
-    "mobx-restful-table": "^2.2.1",
+    "mobx-restful-table": "^2.2.2",
     "next": "^15.3.1",
     "next-pwa": "~5.6.0",
-    "next-ssr-middleware": "^0.10.0",
+    "next-ssr-middleware": "^1.0.0",
     "next-with-less": "^3.0.1",
     "prismjs": "^1.30.0",
     "react": "^19.1.0",

pages/_app.tsx

@@ -3,7 +3,7 @@ import '../styles/globals.less';
 import { HTTPError } from 'koajax';
 import { configure } from 'mobx';
 import { enableStaticRendering, observer } from 'mobx-react';
-import App, { AppContext, AppProps } from 'next/app';
+import App, { AppContext } from 'next/app';
 import Head from 'next/head';
 import { Image } from 'react-bootstrap';
 
@@ -13,10 +13,9 @@ import { isServer } from '../models/configuration';
 import {
   createI18nStore,
   I18nContext,
-  LanguageCode,
-  loadLanguage,
+  I18nProps,
+  loadSSRLanguage,
 } from '../models/Translation';
-import zhCN from '../translation/zh-CN';
 
 configure({ enforceActions: 'never' });
 
@@ -31,20 +30,16 @@ globalThis.addEventListener?.('unhandledrejection', ({ reason }) => {
   if (tips) alert(tips);
 });
 
-interface AppShellProps extends AppProps {
-  language: LanguageCode;
-  languageData: typeof zhCN;
-}
-
 @observer
-export default class AppShell extends App<AppShellProps> {
+export default class AppShell extends App<I18nProps> {
   static async getInitialProps(context: AppContext) {
-    const props = await App.getInitialProps(context);
-
-    return { ...props, ...(await loadLanguage(context.ctx.req!.headers)) };
+    return {
+      ...(await App.getInitialProps(context)),
+      ...(await loadSSRLanguage(context.ctx.req!.headers)),
+    };
   }
 
-  i18nStore = createI18nStore(this.props.language, this.props.languageData);
+  i18nStore = createI18nStore(this.props.language, this.props.languageMap);
 
   render() {
     const { Component, pageProps, router } = this.props,

pages/_error.tsx

@@ -1,24 +1,38 @@
 import * as Sentry from '@sentry/nextjs';
-import type { NextPage } from 'next';
-import type { ErrorProps } from 'next/error';
+import type { NextPageContext } from 'next';
 import Error from 'next/error';
 
 import { NotFoundCard } from '../components/NotFoundCard';
+import {
+  createI18nStore,
+  I18nContext,
+  I18nProps,
+  loadSSRLanguage,
+} from '../models/Translation';
 
-const CustomErrorComponent: NextPage<ErrorProps> = props => (
-  <>
-    <Error {...props} />
-
-    <NotFoundCard {...props} />
-  </>
-);
 const enableSentry =
   process.env.NODE_ENV === 'development' || !process.env.SENTRY_AUTH_TOKEN;
 
-CustomErrorComponent.getInitialProps = async contextData => {
-  if (enableSentry) await Sentry.captureUnderscoreErrorException(contextData);
+export default class CustomError extends Error<I18nProps> {
+  static async getInitialProps(context: NextPageContext) {
+    if (enableSentry) await Sentry.captureUnderscoreErrorException(context);
+
+    return {
+      ...(await Error.getInitialProps(context)),
+      ...(await loadSSRLanguage(context.req!.headers)),
+    };
+  }
+
+  i18nStore = createI18nStore(this.props.language, this.props.languageMap);
 
-  return Error.getInitialProps(contextData);
-};
+  render() {
+    const { props, i18nStore } = this;
 
-export default CustomErrorComponent;
+    return (
+      <I18nContext.Provider value={i18nStore}>
+        <Error {...props} />
+        <NotFoundCard {...props} />
+      </I18nContext.Provider>
+    );
+  }
+}

pages/pagination.tsx

@@ -1,28 +1,27 @@
 import { text2color } from 'idea-react';
-import { computed, observable } from 'mobx';
+import { computed } from 'mobx';
 import { GitRepository } from 'mobx-github';
 import { observer } from 'mobx-react';
+import { ObservedComponent, observePropsState } from 'mobx-react-helper';
 import { Column, RestTable } from 'mobx-restful-table';
-import { Component, ContextType } from 'react';
+import { Component } from 'react';
 import { Badge, Container } from 'react-bootstrap';
 
 import { PageHead } from '../components/PageHead';
 import { repositoryStore } from '../models/Base';
-import { I18nContext } from '../models/Translation';
+import { i18n, I18nContext } from '../models/Translation';
+
+export default interface PaginationPage
+  extends ObservedComponent<{}, typeof i18n> {}
 
 @observer
+@observePropsState
 export default class PaginationPage extends Component {
   static contextType = I18nContext;
 
-  declare context: ContextType<typeof I18nContext>;
-
-  @observable
-  // @ts-expect-error MobX compatibility
-  accessor observedContext = this.context;
-
   @computed
   get columns(): Column<GitRepository>[] {
-    const { t } = this.observedContext;
+    const { t } = this.observedContext!;
 
     return [
       {
@@ -61,7 +60,7 @@ export default class PaginationPage extends Component {
   }
 
   render() {
-    const i18n = this.observedContext;
+    const i18n = this.observedContext!;
 
     return (
       <Container style={{ height: '91vh' }}>