fallback to existing DEFAULT_LOCALE translation in globalisation

Author: jancajthaml

bootstrap/src/component/Globalisation.jsx

@@ -1,3 +1,5 @@
+/* global DEFAULT_LOCALE */
+
 import { useMemo, Fragment } from "react";
 import { createIntl, createIntlCache, RawIntlProvider } from "react-intl";
 import { useSelector } from "react-redux";
@@ -15,6 +17,7 @@ const Globalisation = (props) => {
       createIntl(
         {
           locale,
+          defaultLocale: DEFAULT_LOCALE,
           textComponent: Fragment,
           messages,
           onError: (err) => {

bootstrap/src/component/Main.jsx

@@ -31,7 +31,7 @@ const Main = (props) => {
       store.dispatch({
         type: constants.SET_LANGUAGE,
         payload: {
-          language: props.defaultLocale ?? DEFAULT_LOCALE,
+          language: DEFAULT_LOCALE,
         },
       });
       store.dispatch({

bootstrap/src/component/__tests__/Main.test.jsx

@@ -1,3 +1,5 @@
+/* global DEFAULT_LOCALE */
+
 import { render, screen, waitFor, act } from "@testing-library/react";
 import React from "react";
 import configureStore from "redux-mock-store";
@@ -73,6 +75,7 @@ class ErrorBoundary extends React.Component {
 
 describe("<Main />", () => {
   beforeEach(() => {
+    global.DEFAULT_LOCALE = "en-US";
     mockStore.clearActions();
   });
 
@@ -94,8 +97,9 @@ describe("<Main />", () => {
   });
 
   it("should use provided default locale", async () => {
+    global.DEFAULT_LOCALE = "fr-FR";
     const fetchContext = jest.fn();
-    render(<Main contextRefreshInterval={10} defaultLocale="fr-FR" fetchContext={fetchContext} />);
+    render(<Main contextRefreshInterval={10} fetchContext={fetchContext} />);
     await waitFor(() => {
       expect(screen.getByTestId("module/some-entrypoint")).toBeInTheDocument();
     });

bootstrap/src/selector/__test__/index.test.js

@@ -1,19 +1,24 @@
 import * as selectors from "..";
 
 describe("selector", () => {
-  const state = {
-    runtime: {
-      entrypoint: "value",
-    },
-    env: {
-      language: "en-US",
-      messages: {
-        "en-US": {
-          foo: "bar",
+  let state = null;
+
+  beforeEach(() => {
+    global.DEFAULT_LOCALE = "en-US";
+    state = {
+      runtime: {
+        entrypoint: "value",
+      },
+      env: {
+        language: "en-US",
+        messages: {
+          "en-US": {
+            foo: "bar",
+          },
         },
       },
-    },
-  };
+    };
+  });
 
   describe(".getEntrypoint", () => {
     it("should return entrypoint", () => {
@@ -33,5 +38,17 @@ describe("selector", () => {
       expect(messages.foo).toEqual(state.env.messages["en-US"].foo);
       expect(messages.miss).not.toBeDefined();
     });
+
+    it("should fallback on DEFAULT_LOCALE when it is missing in current locale", () => {
+      state.env.language = "fr-FR";
+      const messages = selectors.getI18nMessages(state);
+      expect(messages.foo).toEqual(state.env.messages["en-US"].foo);
+    });
+
+    it("should work properly when no messages exist at all", () => {
+      delete state.env.messages;
+      const messages = selectors.getI18nMessages(state);
+      expect(messages.foo).not.toBeDefined();
+    });
   });
 });

bootstrap/src/selector/index.js

@@ -1,29 +1,41 @@
+/* global DEFAULT_LOCALE */
+
 const emptydict = {};
-const descriptor = { configurable: true, enumerable: true };
 
 const memoizedMessages = new Proxy(
   {
-    messages: emptydict,
-    descriptor: undefined,
+    fallback: emptydict,
+    primary: emptydict,
+    descriptor: { configurable: true, enumerable: true },
   },
   {
     getOwnPropertyDescriptor(ref, key) {
       return ref.descriptor;
     },
     get(ref, key) {
-      return ref.messages[key];
+      if (key in ref.primary) {
+        return ref.primary[key];
+      }
+      if (key in ref.fallback) {
+        return ref.fallback[key];
+      }
+      return undefined;
     },
     set(ref, locale, messages) {
-      let next = undefined;
+      if (!messages) {
+        ref.primary = emptydict;
+        ref.fallback = emptydict;
+        return true;
+      }
       if (locale in messages) {
-        next = messages[locale];
+        ref.primary = messages[locale];
+      } else {
+        ref.primary = emptydict;
       }
-      if (next) {
-        ref.descriptor = descriptor;
-        ref.messages = next;
+      if (DEFAULT_LOCALE in messages) {
+        ref.fallback = messages[DEFAULT_LOCALE];
       } else {
-        ref.descriptor = undefined;
-        ref.messages = emptydict;
+        ref.fallback = emptydict;
       }
       return true;
     },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lastui/rocker",
-  "version": "0.19.37",
+  "version": "0.19.38",
   "license": "Apache-2.0",
   "author": "[email protected]",
   "homepage": "https://github.com/lastui/rocker#readme",