react-mobx-i18next/dist/index.js

A tiny i18n utility for MobX + React (mobx-react-lite) that replaces react-mobx-i18n. Includes @translatable decorator, withTranslatable HOC, and useTranslatable hook.

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};

// src/index.ts
import { observer } from "mobx-react-lite";

// src/init/createI18n.ts
import i18next from "i18next";
import { initReactI18next } from "react-i18next";
function createI18n(opts = {}) {
  const {
    lang = "en",
    fallbackLang = lang,
    resources,
    debug = false
  } = opts;
  const instance = i18next.createInstance();
  return instance.use(initReactI18next).init({
    lng: lang,
    fallbackLng: fallbackLang,
    resources,
    interpolation: { escapeValue: false },
    debug,
    returnNull: false
  }).then(() => instance);
}

// src/context/translatableContext.ts
import React from "react";
var TranslatableContext = React.createContext({ t: (key) => key, i18n: null, ready: false });

// src/provider/I18nProvider.tsx
import { I18nextProvider } from "react-i18next";
import { jsx } from "react/jsx-runtime";
function I18nProvider({ i18n: i18n2, children }) {
  return /* @__PURE__ */ jsx(I18nextProvider, { i18n: i18n2, children });
}

// src/store/I18nStore.ts
import { observable } from "mobx";
var I18nStore = class {
  constructor(i18n2) {
    this.setLocale = async (lang) => {
      if (this.locale === lang) return this.locale = lang;
      await this.i18n.changeLanguage(lang);
    };
    this.i18n = i18n2;
    this.locale = i18n2.language || "en";
  }
};
__decorateClass([
  observable
], I18nStore.prototype, "locale", 2);
__decorateClass([
  observable
], I18nStore.prototype, "i18n", 2);

// src/translatable/hookTranslatable.tsx
import { useMemo } from "react";
import { useTranslation } from "react-i18next";
function hookTranslatable(ns, options) {
  const { i18n: i18n2, t, ready } = useTranslation(ns, { useSuspense: false, ...options });
  const value = useMemo(() => ({ t, i18n: i18n2, ready }), [t, i18n2, ready]);
  return { context: value };
}

// src/translatable/hocTranslatable.tsx
import { jsx as jsx2 } from "react/jsx-runtime";
var hocTranslatable = (ns, options) => (Component) => {
  const Wrapped = (props) => {
    const { context: value } = hookTranslatable(ns, options);
    return /* @__PURE__ */ jsx2(TranslatableContext.Provider, { value, children: /* @__PURE__ */ jsx2(Component, { ...props }) });
  };
  Wrapped.displayName = `hocTranslatable(${Component.displayName || Component.name || "Component"})`;
  return Wrapped;
};

// src/translatable/decoratorTranslatable.tsx
function decoratorTranslatable(ns, options) {
  return function(Target) {
    class TranslatableTarget extends Target {
    }
    // make class component able to use this.context.t()
    TranslatableTarget.contextType = TranslatableContext;
    TranslatableTarget.displayName = `decoratorTranslatable(${Target.displayName || Target.name})`;
    return hocTranslatable(ns, options)(TranslatableTarget);
  };
}
export {
  I18nProvider,
  I18nStore,
  TranslatableContext,
  createI18n,
  observer,
  decoratorTranslatable as translatable,
  hookTranslatable as useTranslatable,
  hocTranslatable as withTranslatable
};
//# sourceMappingURL=index.js.map