react-mobx-i18next
Version:
A tiny i18n utility for MobX + React (mobx-react-lite) that replaces react-mobx-i18n. Includes @translatable decorator, withTranslatable HOC, and useTranslatable hook.
1 lines • 7.7 kB
Source Map (JSON)
{"version":3,"sources":["../src/index.ts","../src/init/createI18n.ts","../src/context/translatableContext.ts","../src/provider/I18nProvider.tsx","../src/store/I18nStore.ts","../src/translatable/hookTranslatable.tsx","../src/translatable/hocTranslatable.tsx","../src/translatable/decoratorTranslatable.tsx"],"sourcesContent":["export { observer } from 'mobx-react-lite'\n\nexport * from './init/createI18n'\nexport * from './context/translatableContext'\nexport * from './provider/I18nProvider'\nexport * from './store/I18nStore'\nexport { hookTranslatable as useTranslatable } from './translatable/hookTranslatable'\nexport { hocTranslatable as withTranslatable } from './translatable/hocTranslatable'\nexport { decoratorTranslatable as translatable } from './translatable/decoratorTranslatable'","import i18next, { i18n } from 'i18next'\nimport { initReactI18next } from 'react-i18next'\n\nexport interface CreateI18nOptions {\n lang?: string\n fallbackLang?: string | string[]\n resources?: any\n debug?: boolean\n}\n\n/** Create and init a configured i18n instance. */\nexport function createI18n(opts: CreateI18nOptions = {}): Promise<i18n> {\n const {\n lang = 'en',\n fallbackLang = lang,\n resources,\n debug = false,\n } = opts\n\n const instance = i18next.createInstance()\n\n return instance\n .use(initReactI18next)\n .init({\n lng: lang,\n fallbackLng: fallbackLang,\n resources,\n interpolation: { escapeValue: false },\n debug,\n returnNull: false,\n }).then(() => instance)\n\n // return instance\n}","import React from 'react'\n\n// custom one context globally\nexport const TranslatableContext = React.createContext({ t: (key: string) => key, i18n: null, ready: false })","import { I18nextProvider } from 'react-i18next'\nimport type { i18n } from 'i18next'\n\nexport interface I18nProviderProps {\n i18n: i18n\n children: React.ReactNode\n}\n\nexport function I18nProvider({ i18n, children }: I18nProviderProps) {\n return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>\n}","import { observable } from 'mobx'\nimport type { i18n } from 'i18next'\n\n/**\n* MobX store for current language. Changing locale will call i18next.changeLanguage.\n*/\nexport class I18nStore {\n @observable locale: string\n @observable private i18n: i18n\n\n constructor(i18n: i18n) {\n this.i18n = i18n\n this.locale = i18n.language || 'en'\n }\n\n setLocale = async (lang: string) => {\n if (this.locale === lang) return this.locale = lang\n await this.i18n.changeLanguage(lang)\n }\n}","import { useMemo, useContext } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { TranslatableContext } from '../context/translatableContext'\nimport type { NamespaceOption, TranslatableOptions, TranslatableInContext } from '../types'\n\n\n/**\n * Hook for initializing translations.\n * Usage in function component:\n * const Hello = observer(() => {\n * const { context } = useTranslatable('common')\n * return <h1>{ context.t('hello', { name: 'World' }) } </h1>\n * })\n */\nexport function hookTranslatable(ns?: NamespaceOption, options?: TranslatableOptions): TranslatableInContext {\n const { i18n, t, ready } = useTranslation(ns, { useSuspense: false, ...options })\n const value = useMemo(() => ({ t, i18n, ready }), [t, i18n, ready])\n // const outer = useContext(TranslatableContext)\n return { context: value }\n}","import React from 'react'\nimport { hookTranslatable } from './hookTranslatable'\nimport { TranslatableContext } from '../context/translatableContext'\nimport type { NamespaceOption, TranslatableOptions } from '../types'\n\n\n/*\n * Class HOC for translations.\n\n * Usage for Class Component:\n * class MyClassComp extends React.Component {\n * static contextType = TranslatableContext\n * render() {\n * return <div>{this.context.t('hello')}</div>\n * }\n * }\n * export default hocTranslatable('common')(MyClassComp)\n * \n * Usage for Function Component:\n * const MyFuncComp: React.FC = () => {\n * const { context } = useContext(TranslatableContext)\n * return <div>{context.t('hello')}</div>\n * }\n * export default hocTranslatable('common')(MyFuncComp)\n */\nexport const hocTranslatable = (ns?: NamespaceOption, options?: TranslatableOptions) =>\n <P extends object>(Component: React.ComponentType<P>): React.FC<P> => {\n const Wrapped: React.FC<P> = (props) => {\n // get context value from hook\n const { context: value } = hookTranslatable(ns, options)\n // wrap by Context Provider intead of pass props\n return (\n <TranslatableContext.Provider value={value}>\n <Component {...props} />\n </TranslatableContext.Provider>\n )\n }\n\n Wrapped.displayName = `hocTranslatable(${Component.displayName || Component.name || 'Component'})`\n\n return Wrapped\n }\n","import { TranslatableContext } from '../context/translatableContext'\nimport { hocTranslatable } from './hocTranslatable'\nimport type { NamespaceOption, TranslatableOptions } from '../types'\n\n/*\n * Class decorator for translations.\n * Usage:\n * @decoratorTranslatable('common')\n * class MyComp extends React.Component {\n * render() {\n * return <div>{this.context.t('hello')}</div>\n * }\n * }\n */\nexport function decoratorTranslatable(ns?: NamespaceOption, options?: TranslatableOptions): ClassDecorator {\n return function (Target: any): any {\n class TranslatableTarget extends Target {\n // make class component able to use this.context.t()\n static contextType = TranslatableContext\n }\n\n (TranslatableTarget as any).displayName = `decoratorTranslatable(${Target.displayName || Target.name})`\n\n return hocTranslatable(ns, options)(TranslatableTarget)\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAAyB;;;ACAzB,qBAA8B;AAC9B,2BAAiC;AAU1B,SAAS,WAAW,OAA0B,CAAC,GAAkB;AACtE,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,eAAe;AAAA,IACf;AAAA,IACA,QAAQ;AAAA,EACV,IAAI;AAEJ,QAAM,WAAW,eAAAA,QAAQ,eAAe;AAExC,SAAO,SACJ,IAAI,qCAAgB,EACpB,KAAK;AAAA,IACJ,KAAK;AAAA,IACL,aAAa;AAAA,IACb;AAAA,IACA,eAAe,EAAE,aAAa,MAAM;AAAA,IACpC;AAAA,IACA,YAAY;AAAA,EACd,CAAC,EAAE,KAAK,MAAM,QAAQ;AAG1B;;;ACjCA,mBAAkB;AAGX,IAAM,sBAAsB,aAAAC,QAAM,cAAc,EAAE,GAAG,CAAC,QAAgB,KAAK,MAAM,MAAM,OAAO,MAAM,CAAC;;;ACH5G,IAAAC,wBAAgC;AASvB;AADF,SAAS,aAAa,EAAE,MAAAC,OAAM,SAAS,GAAsB;AAClE,SAAO,4CAAC,yCAAgB,MAAMA,OAAO,UAAS;AAChD;;;ACVA,kBAA2B;AAMpB,IAAM,YAAN,MAAgB;AAAA,EAIrB,YAAYC,OAAY;AAKxB,qBAAY,OAAO,SAAiB;AAClC,UAAI,KAAK,WAAW,KAAM,QAAO,KAAK,SAAS;AAC/C,YAAM,KAAK,KAAK,eAAe,IAAI;AAAA,IACrC;AAPE,SAAK,OAAOA;AACZ,SAAK,SAASA,MAAK,YAAY;AAAA,EACjC;AAMF;AAZc;AAAA,EAAX;AAAA,GADU,UACC;AACQ;AAAA,EAAnB;AAAA,GAFU,UAES;;;ACRtB,IAAAC,gBAAoC;AACpC,IAAAC,wBAA+B;AAaxB,SAAS,iBAAiB,IAAsB,SAAsD;AAC3G,QAAM,EAAE,MAAAC,OAAM,GAAG,MAAM,QAAI,sCAAe,IAAI,EAAE,aAAa,OAAO,GAAG,QAAQ,CAAC;AAChF,QAAM,YAAQ,uBAAQ,OAAO,EAAE,GAAG,MAAAA,OAAM,MAAM,IAAI,CAAC,GAAGA,OAAM,KAAK,CAAC;AAElE,SAAO,EAAE,SAAS,MAAM;AAC1B;;;ACcU,IAAAC,sBAAA;AARH,IAAM,kBAAkB,CAAC,IAAsB,YACpD,CAAmB,cAAmD;AACpE,QAAM,UAAuB,CAAC,UAAU;AAEtC,UAAM,EAAE,SAAS,MAAM,IAAI,iBAAiB,IAAI,OAAO;AAEvD,WACE,6CAAC,oBAAoB,UAApB,EAA6B,OAC5B,uDAAC,aAAW,GAAG,OAAO,GACxB;AAAA,EAEJ;AAEA,UAAQ,cAAc,mBAAmB,UAAU,eAAe,UAAU,QAAQ,WAAW;AAE/F,SAAO;AACT;;;AC3BK,SAAS,sBAAsB,IAAsB,SAA+C;AACzG,SAAO,SAAU,QAAkB;AAAA,IACjC,MAAM,2BAA2B,OAAO;AAAA,IAGxC;AADE;AAAA,IAFI,mBAEG,cAAc;AAGvB,IAAC,mBAA2B,cAAc,yBAAyB,OAAO,eAAe,OAAO,IAAI;AAEpG,WAAO,gBAAgB,IAAI,OAAO,EAAE,kBAAkB;AAAA,EACxD;AACF;","names":["i18next","React","import_react_i18next","i18n","i18n","import_react","import_react_i18next","i18n","import_jsx_runtime"]}