@sheet-i18n/react 1.6.1 → 1.6.2-canary.0

package/dist/index.js

@@ -1,8 +1,30 @@
+"use client";
 "use strict";
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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))
@@ -16,11 +38,543 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 
 // src/index.ts
 var src_exports = {};
+__export(src_exports, {
+  LocaleStorageManager: () => LocaleStorageManager,
+  createI18nContext: () => createI18nContext,
+  ruleFactory: () => ruleFactory
+});
 module.exports = __toCommonJS(src_exports);
-__reExport(src_exports, require("@sheet-i18n/react-core"), module.exports);
-__reExport(src_exports, require("@sheet-i18n/react-client"), module.exports);
+__reExport(src_exports, require("@sheet-i18n/core"), module.exports);
+
+// src/createI18nContext.tsx
+var import_shared_utils6 = require("@sheet-i18n/shared-utils");
+var import_core = require("@sheet-i18n/core");
+
+// src/Provider/IntlProvider.tsx
+var import_react_intl2 = require("react-intl");
+var import_react2 = require("react");
+
+// src/hooks/useDynamicLocale.ts
+var import_shared_utils2 = require("@sheet-i18n/shared-utils");
+var import_react = require("react");
+
+// src/Service/IntlInstanceCache.ts
+var import_react_intl = require("react-intl");
+var import_shared_utils = require("@sheet-i18n/shared-utils");
+var intlCache = (0, import_react_intl.createIntlCache)();
+var IntlInstanceCache = class _IntlInstanceCache {
+  constructor() {
+    this.cache = {};
+    this.getCachedIntlInstance = (sheetTitle, i18nStore, environment = "client") => {
+      const currentLocale = i18nStore.getCurrentLocale();
+      const cachedIntlInstance = this.cache[sheetTitle];
+      const sameLocale = (cachedIntlInstance == null ? void 0 : cachedIntlInstance.locale) === currentLocale;
+      if (cachedIntlInstance && sameLocale) {
+        return cachedIntlInstance.intlInstance;
+      }
+      return environment === "client" ? this.createClientIntlInstance(sheetTitle, i18nStore) : this.createServerIntlInstance(sheetTitle, i18nStore);
+    };
+    this.getTotalCache = () => {
+      return this.cache;
+    };
+    this.resetTotalCache = () => {
+      this.cache = {};
+    };
+    this.createClientIntlInstance = (sheetTitle, i18nStore) => {
+      const currentIntl = (0, import_react_intl.useIntl)();
+      const currentLocale = i18nStore.getCurrentLocale();
+      const targetMessages = i18nStore.getTargetMessages(sheetTitle);
+      const newIntl = (0, import_react_intl.createIntl)(
+        __spreadProps(__spreadValues({}, currentIntl), { messages: targetMessages }),
+        intlCache
+      );
+      if (currentLocale) {
+        this.setCachedIntlInstance(sheetTitle, currentLocale, newIntl);
+      }
+      return newIntl;
+    };
+    this.createServerIntlInstance = (sheetTitle, i18nStore) => {
+      const currentLocale = i18nStore.getCurrentLocale();
+      const targetMessages = i18nStore.getTargetMessages(sheetTitle);
+      if (!i18nStore || !currentLocale) {
+        return null;
+      }
+      const newIntl = (0, import_react_intl.createIntl)(
+        { locale: currentLocale, messages: targetMessages },
+        intlCache
+      );
+      if (currentLocale) {
+        this.setCachedIntlInstance(sheetTitle, currentLocale, newIntl);
+      }
+      return newIntl;
+    };
+  }
+  static init() {
+    if (!_IntlInstanceCache.instance) {
+      _IntlInstanceCache.instance = new _IntlInstanceCache();
+    }
+    return _IntlInstanceCache.instance;
+  }
+  setCachedIntlInstance(sheetTitle, currentLocale, intlInstance) {
+    if (import_shared_utils.validator.isNullish(this.cache[sheetTitle])) {
+      this.cache[sheetTitle] = {
+        locale: currentLocale,
+        intlInstance
+      };
+    }
+  }
+};
+var intlInstanceCache = IntlInstanceCache.init();
+
+// src/hooks/useDynamicLocale.ts
+function useDynamicLocale(useDynamicLocaleProps) {
+  const { i18nStore } = useDynamicLocaleProps != null ? useDynamicLocaleProps : {};
+  const currentLocale = i18nStore == null ? void 0 : i18nStore.getCurrentLocale();
+  const [isLoading, setIsLoading] = (0, import_react.useState)(false);
+  (0, import_react.useLayoutEffect)(() => {
+    var _a;
+    if (import_shared_utils2.validator.isNullish(currentLocale)) return;
+    const dynamicLoaders = (_a = i18nStore == null ? void 0 : i18nStore.dynamicLoaders) != null ? _a : useDynamicLocaleProps == null ? void 0 : useDynamicLocaleProps.dynamicLoaders;
+    if (!dynamicLoaders) return;
+    const targetDynamicLoader = dynamicLoaders[currentLocale];
+    if (!targetDynamicLoader) return;
+    const currentLocaleSet = i18nStore == null ? void 0 : i18nStore.localeSet;
+    const targetLocaleData = currentLocaleSet == null ? void 0 : currentLocaleSet[currentLocale];
+    if (targetLocaleData) return;
+    setIsLoading(true);
+    targetDynamicLoader == null ? void 0 : targetDynamicLoader().then((res) => {
+      const { default: localeData } = res;
+      i18nStore == null ? void 0 : i18nStore.mergeLocaleSet(currentLocale, localeData);
+      intlInstanceCache.resetTotalCache();
+      setIsLoading(false);
+    }).catch((err) => {
+      console.log(`\u26A0\uFE0F dynamic loader error: 
+${err}`);
+      setIsLoading(false);
+    });
+  }, [currentLocale]);
+  return {
+    isLoading
+  };
+}
+
+// src/Provider/IntlProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function IntlProvider({
+  i18nStore,
+  currentLocale,
+  children: childrenFromProps
+}) {
+  const { locale } = useIntlLocale({ i18nStore, currentLocale });
+  const onIntlError = (err) => {
+    const typeSafe = i18nStore.typeSafe;
+    if (typeSafe) {
+      console.error(err);
+    }
+  };
+  const { isLoading } = useDynamicLocale({ i18nStore });
+  const children = typeof childrenFromProps === "function" ? childrenFromProps(locale) : childrenFromProps;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_intl2.IntlProvider,
+    {
+      locale,
+      messages: i18nStore == null ? void 0 : i18nStore.localeSet[locale],
+      onError: onIntlError,
+      children: !isLoading && children
+    },
+    `sheet-i18n-locale-${locale}`
+  );
+}
+function useIntlLocale({
+  i18nStore,
+  currentLocale
+}) {
+  const locale = currentLocale || detectClientLanguage(i18nStore) || i18nStore.defaultLocale;
+  i18nStore.setCurrentLocale(locale);
+  (0, import_react2.useEffect)(() => {
+    i18nStore.setCurrentLocale(locale);
+  }, [locale]);
+  return {
+    locale
+  };
+}
+function detectClientLanguage(i18nStore) {
+  const { defaultLocale, supportedLocales } = i18nStore;
+  if (typeof navigator !== "undefined" && (navigator == null ? void 0 : navigator.languages)) {
+    const preferredLocale = navigator.languages.find(
+      (lang) => supportedLocales == null ? void 0 : supportedLocales.includes(lang)
+    );
+    return preferredLocale != null ? preferredLocale : defaultLocale;
+  }
+  return defaultLocale != null ? defaultLocale : "";
+}
+
+// src/Service/TranslationService.ts
+var import_shared_utils3 = require("@sheet-i18n/shared-utils");
+var TranslationService = class {
+  constructor(intlInstance) {
+    this.intlInstance = intlInstance;
+  }
+  translate(id, values, opts, _descriptor) {
+    const descriptor = this.createDescriptor(id, _descriptor);
+    const targetTranslation = this.findTargetTranslation(id, {
+      descriptor,
+      values,
+      opts
+    });
+    return targetTranslation;
+  }
+  /** helpers */
+  createDescriptor(id, _descriptor) {
+    var _a;
+    return __spreadProps(__spreadValues({}, _descriptor != null ? _descriptor : {}), {
+      id,
+      defaultMessage: (_a = _descriptor == null ? void 0 : _descriptor.defaultMessage) != null ? _a : id
+    });
+  }
+  findTargetTranslation(id, $tParams) {
+    var _a, _b, _c, _d, _e;
+    const targetTranslation = (_b = (_a = this == null ? void 0 : this.intlInstance) == null ? void 0 : _a.messages) == null ? void 0 : _b[id];
+    if (import_shared_utils3.validator.isNullish(targetTranslation)) {
+      return id;
+    }
+    if (typeof targetTranslation === "string" && targetTranslation.trim() === "") {
+      return "";
+    }
+    if (!$tParams || !($tParams == null ? void 0 : $tParams.descriptor)) {
+      return "";
+    }
+    return (_e = (_d = (_c = this.intlInstance) == null ? void 0 : _c.$t) == null ? void 0 : _d.call(
+      _c,
+      $tParams.descriptor,
+      $tParams.values,
+      $tParams.opts
+    )) != null ? _e : "";
+  }
+};
+
+// src/hooks/useTranslation.ts
+function useTranslation({
+  sheetTitle,
+  i18nStore,
+  rules
+}) {
+  const intlInstance = intlInstanceCache.getCachedIntlInstance(
+    sheetTitle,
+    i18nStore
+  );
+  const translationService = new TranslationService(intlInstance);
+  const t = (id, values, opts, _descriptor) => {
+    return translationService.translate(id, values, opts, _descriptor);
+  };
+  t.dynamic = (id, values, opts, _descriptor) => {
+    return translationService.translate(id, values, opts, _descriptor);
+  };
+  t.rule = (ruleKey, values) => {
+    const ruleFn = rules == null ? void 0 : rules[ruleKey];
+    if (!ruleFn) return ruleKey;
+    const messageId = ruleFn(values, {});
+    return translationService.translate(messageId, values);
+  };
+  return { t };
+}
+
+// src/Errors.ts
+var import_errors = require("@sheet-i18n/errors");
+var InvalidI18nContextStateError = class extends import_errors.CustomError {
+};
+var IsNotInstanceOfI18nStoreError = class extends import_errors.CustomError {
+};
+
+// src/hooks/getTranslation.ts
+function getTranslation({
+  sheetTitle,
+  i18nStore
+}) {
+  const t = (id, values, opts, _descriptor) => {
+    const intlInstance = intlInstanceCache.getCachedIntlInstance(
+      sheetTitle,
+      i18nStore,
+      "server"
+    );
+    const translationService = new TranslationService(intlInstance);
+    return translationService.translate(id, values, opts, _descriptor);
+  };
+  t.dynamic = (id, values, opts, _descriptor) => {
+    const intlInstance = intlInstanceCache.getCachedIntlInstance(
+      sheetTitle,
+      i18nStore,
+      "server"
+    );
+    const translationService = new TranslationService(intlInstance);
+    return translationService.translate(id, values, opts, _descriptor);
+  };
+  t.promise = (id, values, opts, _descriptor) => {
+    const intlInitPromise = new Promise((resolve) => {
+      setTimeout(() => {
+        const intlInstance = intlInstanceCache.getCachedIntlInstance(
+          sheetTitle,
+          i18nStore,
+          "server"
+        );
+        resolve(intlInstance);
+      }, 1);
+    });
+    return new Promise((resolve) => {
+      intlInitPromise.then((intlInstance) => {
+        const translationService = new TranslationService(intlInstance);
+        resolve(translationService.translate(id, values, opts, _descriptor));
+      });
+    });
+  };
+  return { t };
+}
+
+// src/Service/StorageService.ts
+var import_shared_utils4 = require("@sheet-i18n/shared-utils");
+var StorageService = class {
+  constructor(storage) {
+    this.storage = null;
+    this.isClientSide = typeof window !== "undefined";
+    if (storage) {
+      this.storage = this.validateStorage(storage);
+    } else if (this.isClientSide) {
+      this.storage = this.initializeWindowLocalStorage();
+    }
+  }
+  validateStorage(storage) {
+    const requiredMethods = [
+      "getItem",
+      "setItem",
+      "removeItem",
+      "clear"
+    ];
+    try {
+      for (const method of requiredMethods) {
+        if (typeof storage[method] !== "function") {
+          throw new Error(
+            `Invalid storage object: missing required method '${method}'`
+          );
+        }
+      }
+      return storage;
+    } catch (error) {
+      console.error(error);
+      return null;
+    }
+  }
+  initializeWindowLocalStorage() {
+    try {
+      const testKey = "__storage_test__";
+      localStorage.setItem(testKey, "test");
+      localStorage.removeItem(testKey);
+      return localStorage;
+    } catch (error) {
+      console.warn("Window LocalStorage is not available:", error);
+      return null;
+    }
+  }
+  getItem(key) {
+    if (!this.storage || !key) {
+      return "";
+    }
+    try {
+      return this.storage.getItem(key);
+    } catch (error) {
+      console.error(`Failed to get item with key "${key}":`, error);
+      return "";
+    }
+  }
+  setItem(key, value) {
+    if (!this.storage || !key) {
+      return false;
+    }
+    try {
+      this.storage.setItem(key, value);
+      return true;
+    } catch (error) {
+      console.error(`Failed to set item with key "${key}":`, error);
+      return false;
+    }
+  }
+  removeItem(key) {
+    if (!this.storage || !key) {
+      return false;
+    }
+    try {
+      this.storage.removeItem(key);
+      return true;
+    } catch (error) {
+      console.error(`Failed to remove item with key "${key}":`, error);
+      return false;
+    }
+  }
+  clear() {
+    if (!this.storage) {
+      return false;
+    }
+    try {
+      this.storage.clear();
+      return true;
+    } catch (error) {
+      console.error("Failed to clear storage:", error);
+      return false;
+    }
+  }
+};
+var LocaleStorageManager = class {
+  constructor(storageService, i18nStore, localeStorageKey = "sheet-i18n-locale") {
+    this.storageService = storageService;
+    this.i18nStore = i18nStore;
+    this.localeStorageKey = localeStorageKey;
+    this.observerManager = new import_shared_utils4.ObserverManager();
+    this.initializeCurrentLocale = () => {
+      var _a, _b;
+      const storedLocale = this.storageService.getItem(this.localeStorageKey);
+      if (!storedLocale || storedLocale === "") {
+        const defaultLocale = this.i18nStore.currentLocale || this.i18nStore.defaultLocale;
+        this.storageService.setItem(this.localeStorageKey, defaultLocale);
+      }
+      (_b = (_a = this.i18nStore) == null ? void 0 : _a.observerManager) == null ? void 0 : _b.addListener({
+        listenerId: this.localeStorageKey,
+        listener: (newLocale) => {
+          this.storageService.setItem(this.localeStorageKey, newLocale);
+        }
+      });
+    };
+    this.getLocale = () => {
+      const stored = this.storageService.getItem(this.localeStorageKey);
+      if (!stored || stored === "") {
+        return this.i18nStore.defaultLocale;
+      }
+      return stored;
+    };
+    this.setLocale = (locale) => {
+      this.storageService.setItem(this.localeStorageKey, locale);
+      this.observerManager.notify(locale);
+    };
+    this.initializeCurrentLocale();
+  }
+};
+var getLocaleStorageManager = (i18nStore, storage) => {
+  const localeStorageService = new StorageService(storage);
+  const localeStorageManager = new LocaleStorageManager(
+    localeStorageService,
+    i18nStore
+  );
+  return localeStorageManager;
+};
+
+// src/hooks/useLocaleStorage.ts
+var import_react3 = require("react");
+var LISTENER_ID = "LOCALE_STORAGE_LISTENER_ID";
+function useLocaleStorage(localeStorageManager) {
+  const [locale, setLocale] = (0, import_react3.useState)();
+  (0, import_react3.useEffect)(() => {
+    const storedLocale = localeStorageManager.getLocale();
+    setLocale(storedLocale);
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    var _a;
+    (_a = localeStorageManager == null ? void 0 : localeStorageManager.observerManager) == null ? void 0 : _a.addListener({
+      listenerId: LISTENER_ID,
+      listener: (newLocale) => {
+        setLocale(newLocale);
+      }
+    });
+    return () => {
+      var _a2;
+      (_a2 = localeStorageManager == null ? void 0 : localeStorageManager.observerManager) == null ? void 0 : _a2.removeListener(LISTENER_ID);
+    };
+  }, []);
+  return { locale };
+}
+
+// src/Provider/StorageBasedIntlProvider.tsx
+var import_shared_utils5 = require("@sheet-i18n/shared-utils");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function StorageBasedIntlProvider({
+  i18nStore,
+  storageManager,
+  fallbackUI = null,
+  children: childrenFromProps
+}) {
+  const { locale } = useLocaleStorage(storageManager);
+  if (import_shared_utils5.validator.isNullish(locale)) {
+    return fallbackUI;
+  }
+  const children = typeof childrenFromProps === "function" ? childrenFromProps(locale) : childrenFromProps;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IntlProvider, { currentLocale: locale, i18nStore, children });
+}
+
+// src/createI18nContext.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function createI18nContext(i18nStore, plugins) {
+  if (import_shared_utils6.validator.isNullish(i18nStore)) {
+    throw new InvalidI18nContextStateError(
+      "\u26A0\uFE0F no i18nStore provided. To use createI18nContext, you must provide an i18nStore as a parameter"
+    );
+  }
+  if (i18nStore instanceof import_core.I18nStore !== true) {
+    throw new IsNotInstanceOfI18nStoreError(
+      "\u26A0\uFE0F The provided i18nStore is invalid. Please ensure a store instance you passed is an instance of I18nStore."
+    );
+  }
+  const { rules } = plugins != null ? plugins : {};
+  const IntlProviderImpl = ({
+    currentLocale,
+    children
+  }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    IntlProvider,
+    {
+      currentLocale,
+      i18nStore,
+      children
+    }
+  );
+  const StorageBasedIntlProviderImpl = ({
+    storageManager,
+    children
+  }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    StorageBasedIntlProvider,
+    {
+      i18nStore,
+      storageManager,
+      children
+    }
+  );
+  const useTranslationImpl = (sheetTitle) => useTranslation({ sheetTitle, i18nStore, rules });
+  const getTranslationImpl = (sheetTitle) => getTranslation({ sheetTitle, i18nStore });
+  const getLocaleStorageManagerImpl = (storageService) => {
+    return getLocaleStorageManager(i18nStore, storageService);
+  };
+  return {
+    IntlProvider: IntlProviderImpl,
+    StorageBasedIntlProvider: StorageBasedIntlProviderImpl,
+    useTranslation: useTranslationImpl,
+    getTranslation: getTranslationImpl,
+    getLocaleStorageManager: getLocaleStorageManagerImpl,
+    useLocaleStorage
+  };
+}
+
+// src/Service/RuleService.ts
+var RuleService = class {
+  constructor(i18nStore) {
+    this.i18nStore = i18nStore;
+    this.createRule = (ruleFn) => {
+      const currentLocaleSet = this.i18nStore.getCurrentLocaleSet();
+      return (values) => ruleFn(values, currentLocaleSet);
+    };
+  }
+};
+var ruleFactory = (i18nStore) => {
+  return new RuleService(i18nStore);
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ...require("@sheet-i18n/react-core"),
-  ...require("@sheet-i18n/react-client")
+  LocaleStorageManager,
+  createI18nContext,
+  ruleFactory,
+  ...require("@sheet-i18n/core")
 });