react-mobx-i18next/dist/index.cjs

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

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
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
var index_exports = {};
__export(index_exports, {
  I18nProvider: () => I18nProvider,
  I18nStore: () => I18nStore,
  TranslatableContext: () => TranslatableContext,
  createI18n: () => createI18n,
  observer: () => import_mobx_react_lite.observer,
  translatable: () => decoratorTranslatable,
  useTranslatable: () => hookTranslatable,
  withTranslatable: () => hocTranslatable
});
module.exports = __toCommonJS(index_exports);
var import_mobx_react_lite = require("mobx-react-lite");

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

// src/context/translatableContext.ts
var import_react = __toESM(require("react"), 1);
var TranslatableContext = import_react.default.createContext({ t: (key) => key, i18n: null, ready: false });

// src/provider/I18nProvider.tsx
var import_react_i18next2 = require("react-i18next");
var import_jsx_runtime = require("react/jsx-runtime");
function I18nProvider({ i18n: i18n2, children }) {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_i18next2.I18nextProvider, { i18n: i18n2, children });
}

// src/store/I18nStore.ts
var import_mobx = require("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([
  import_mobx.observable
], I18nStore.prototype, "locale", 2);
__decorateClass([
  import_mobx.observable
], I18nStore.prototype, "i18n", 2);

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

// src/translatable/hocTranslatable.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var hocTranslatable = (ns, options) => (Component) => {
  const Wrapped = (props) => {
    const { context: value } = hookTranslatable(ns, options);
    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TranslatableContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(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);
  };
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  I18nProvider,
  I18nStore,
  TranslatableContext,
  createI18n,
  observer,
  translatable,
  useTranslatable,
  withTranslatable
});
//# sourceMappingURL=index.cjs.map