Merge pull request #97 from alibaba/fallbackLocale

Fallback locale
alibaba · Oct 30, 2018 · a5d97fd · a5d97fd
2 parents 71a56eb + 96c9123
commit a5d97fd
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -278,6 +278,7 @@ require('intl/locale-data/jsonp/ja.js');
    * @param {Object} options.locales App locale data like {"en-US":{"key1":"value1"},"zh-CN":{"key1":"值1"}}
    * @param {Object} options.commonLocaleDataUrls Custom common locale urls. See https://github.com/alibaba/react-intl-universal/releases/tag/1.12.0
    * @param {Object} options.warningHandler Ability to accumulate missing messages using third party services. See https://github.com/alibaba/react-intl-universal/releases/tag/1.11.1
+   * @param {string} options.fallbackLocale Fallback locale such as 'zh-CN' to use if a key is not found in the current locale
    * @returns {Promise}
    */
   init(options)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-intl-universal",
-  "version": "1.14.3",
+  "version": "1.15.0",
   "description": "Internationalize React apps. Not only for React.Component but also for Vanilla JS.",
   "keywords": [
     "intl",

diff --git a/src/index.js b/src/index.js
@@ -48,6 +48,7 @@ class ReactIntlUniversal {
       warningHandler: console.warn, // ability to accumulate missing messages using third party services like Sentry
       escapeHtml: true, // disable escape html in variable mode
       commonLocaleDataUrls: COMMON_LOCALE_DATA_URLS,
+      fallbackLocale: null, // Locale to use if a key is not found in the current locale
     };
   }
 
@@ -69,10 +70,20 @@ class ReactIntlUniversal {
     }
     let msg = this.getDescendantProp(locales[currentLocale], key);
     if (msg == null) {
-      this.options.warningHandler(
-        `react-intl-universal key "${key}" not defined in ${currentLocale}`
-      );
-      return "";
+      if (this.options.fallbackLocale) {
+        msg = this.getDescendantProp(locales[this.options.fallbackLocale], key);
+        if (msg == null) {
+          this.options.warningHandler(
+            `react-intl-universal key "${key}" not defined in ${currentLocale} or the fallback locale, ${this.options.fallbackLocale}`
+          );
+          return "";
+        }
+      } else {
+        this.options.warningHandler(
+          `react-intl-universal key "${key}" not defined in ${currentLocale}`
+        );
+        return "";
+      }
     }
     if (variables) {
       variables = Object.assign({}, variables);

diff --git a/test/index.js b/test/index.js
@@ -69,7 +69,7 @@ test("react-intl mirror API formatHTMLMessage:defaultMessage", () => {
   intl.init({ locales, currentLocale: "en-US" });
   let reactEl = intl.formatHTMLMessage({
     id: "not-exist-key",
-    defaultMessage: React.createElement("div", {className: 'test'})
+    defaultMessage: React.createElement("div", { className: 'test' })
   });
 
   expect(reactEl.type).toBe('div');
@@ -211,7 +211,7 @@ test("Without default message, just return empty string", () => {
 
 test("Should call handler when message is not defined", () => {
   const warningHandler = jest.fn();
-  intl.init({ 
+  intl.init({
     locales, currentLocale: "en-US",
     warningHandler
   });
@@ -290,7 +290,18 @@ test("load mutiple locale data without overriding existing one", () => {
   const localesMore = {
     "en-US": enUSMore,
   };
-  intl.load(localesMore); 
+  intl.load(localesMore);
   expect(intl.get("SIMPLE")).toBe("Simple");
   expect(intl.get("MORE")).toBe("More data");
 });
+
+test("Uses fallback locale if key not found in currentLocale", () => {
+  intl.init({ locales, currentLocale: "zh-CN", fallbackLocale: "en-US" });
+  expect(intl.get("ONLY_IN_ENGLISH")).toBe("ONLY_IN_ENGLISH");
+});
+
+test("Uses default message if key not found in fallbackLocale", () => {
+  intl.init({ locales, currentLocale: "zh-CN", fallbackLocale: "en-US" });
+  expect(intl.get("not-exist-key").defaultMessage("this is default msg")).toBe("this is default msg");
+});
+
diff --git a/test/locales/en-US.js b/test/locales/en-US.js
@@ -15,4 +15,5 @@ module.exports = ({
   "DOT.HELLO": "Hello World",
   "BRACE1": "The format is {var}",
   "BRACE2": "The format is ${var}",
+  "ONLY_IN_ENGLISH": "ONLY_IN_ENGLISH"
 });
diff --git a/typings/index.d.ts b/typings/index.d.ts
@@ -70,6 +70,7 @@ declare module "react-intl-universal" {
      * @param {string} options.currentLocale Current locale such as 'en-US'
      * @param {Object} options.locales App locale data like {"en-US":{"key1":"value1"},"zh-CN":{"key1":"值1"}}
      * @param {Object} options.warningHandler Ability to accumulate missing messages using third party services like Sentry
+     * @param {string} options.fallbackLocale Fallback locale such as 'zh-CN' to use if a key is not found in the current locale
      * @param {boolean} options.escapeHtml To escape html. Default value is true.
      * @returns {Promise}
      */