improve defaultLocale behaviour post compilation

Author: jancajthaml

bootstrap/src/component/Globalisation.jsx

@@ -1,14 +1,14 @@
-/* global DEFAULT_LOCALE */
-
 import { useMemo, Fragment } from "react";
 import { createIntl, createIntlCache, RawIntlProvider } from "react-intl";
 import { useSelector } from "react-redux";
 
-import { getLanguage, getI18nMessages } from "../selector";
+import { getLanguage, getI18nMessagesFacade } from "../selector";
 
 const cache = createIntlCache();
 
 const Globalisation = (props) => {
+  const getI18nMessages = useMemo(() => getI18nMessagesFacade(props.defaultLocale), [props.defaultLocale]);
+
   const locale = useSelector(getLanguage);
   const messages = useSelector(getI18nMessages);
 
@@ -17,7 +17,7 @@ const Globalisation = (props) => {
       createIntl(
         {
           locale,
-          defaultLocale: DEFAULT_LOCALE,
+          defaultLocale: props.defaultLocale,
           textComponent: Fragment,
           messages,
           onError: (err) => {
@@ -28,7 +28,7 @@ const Globalisation = (props) => {
         },
         cache,
       ),
-    [locale, messages],
+    [props.defaultLocale, locale, messages],
   );
 
   return <RawIntlProvider value={intl}>{props.children}</RawIntlProvider>;

bootstrap/src/component/Main.jsx

@@ -1,5 +1,3 @@
-/* global DEFAULT_LOCALE */
-
 import { Children, StrictMode, useState, useCallback, useEffect } from "react";
 import { Provider as ReduxProvider, useSelector } from "react-redux";
 
@@ -11,6 +9,8 @@ import setupStore from "../store";
 import Entrypoint, { router } from "./Entrypoint";
 import Globalisation from "./Globalisation";
 
+const DEFAULT_LOCALE = "en-US";
+
 const FullyInitializedGate = (props) => {
   const initialized = useSelector(getIsInitialized);
   const locale = useSelector(getLanguage);
@@ -31,7 +31,7 @@ const Main = (props) => {
       store.dispatch({
         type: constants.SET_LANGUAGE,
         payload: {
-          language: DEFAULT_LOCALE,
+          language: props.defaultLocale ?? DEFAULT_LOCALE,
         },
       });
       store.dispatch({
@@ -46,7 +46,14 @@ const Main = (props) => {
         throw error;
       });
     }
-  }, [markStoreReady, setErrorState, props.reduxMiddlewares, props.fetchContext, props.contextRefreshInterval]);
+  }, [
+    markStoreReady,
+    setErrorState,
+    props.defaultLocale,
+    props.reduxMiddlewares,
+    props.fetchContext,
+    props.contextRefreshInterval,
+  ]);
 
   useEffect(() => {
     manualCleanup();
@@ -64,7 +71,7 @@ const Main = (props) => {
     <StrictMode>
       <ReduxProvider store={getStore()}>
         <FullyInitializedGate>
-          <Globalisation>
+          <Globalisation defaultLocale={props.defaultLocale ?? DEFAULT_LOCALE}>
             <Entrypoint />
           </Globalisation>
         </FullyInitializedGate>

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

@@ -73,7 +73,6 @@ class ErrorBoundary extends React.Component {
 
 describe("<Main />", () => {
   beforeEach(() => {
-    global.DEFAULT_LOCALE = "en-US";
     mockStore.clearActions();
   });
 
@@ -95,9 +94,8 @@ describe("<Main />", () => {
   });
 
   it("should use provided default locale", async () => {
-    global.DEFAULT_LOCALE = "fr-FR";
     const fetchContext = jest.fn();
-    render(<Main contextRefreshInterval={10} fetchContext={fetchContext} />);
+    render(<Main contextRefreshInterval={10} fetchContext={fetchContext} defaultLocale="fr-FR" />);
     await waitFor(() => {
       expect(screen.getByTestId("module/some-entrypoint")).toBeInTheDocument();
     });

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

@@ -4,7 +4,6 @@ describe("selector", () => {
   let state = null;
 
   beforeEach(() => {
-    global.DEFAULT_LOCALE = "en-US";
     state = {
       runtime: {
         entrypoint: "value",
@@ -32,22 +31,26 @@ describe("selector", () => {
     });
   });
 
-  describe(".getI18nMessages", () => {
+  describe(".getI18nMessagesFacade", () => {
+    it("should return function", () => {
+      expect(typeof selectors.getI18nMessagesFacade("en-US")).toEqual("function");
+    });
+
     it("should return a structure supporting getting i18n keys", () => {
-      const messages = selectors.getI18nMessages(state);
+      const messages = selectors.getI18nMessagesFacade("en-US")(state);
       expect(messages.foo).toEqual(state.env.messages["en-US"].foo);
       expect(messages.miss).toBeUndefined();
     });
 
-    it("should fallback on DEFAULT_LOCALE when it is missing in current locale", () => {
+    it("should fallback on default locale when it is missing in current locale", () => {
       state.env.language = "fr-FR";
-      const messages = selectors.getI18nMessages(state);
+      const messages = selectors.getI18nMessagesFacade("en-US")(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);
+      const messages = selectors.getI18nMessagesFacade("en-US")(state);
       expect(messages.foo).toBeUndefined();
     });
   });

bootstrap/src/selector/index.js

@@ -1,50 +1,53 @@
-/* global DEFAULT_LOCALE */
-
 const emptydict = {};
 
-const memoizedMessages = new Proxy(
-  {
-    fallback: emptydict,
-    primary: emptydict,
-    descriptor: { configurable: true, enumerable: true },
-  },
-  {
-    getOwnPropertyDescriptor(ref, _key) {
-      return ref.descriptor;
-    },
-    get(ref, key) {
-      if (key in ref.primary) {
-        return ref.primary[key];
-      }
-      if (key in ref.fallback) {
-        return ref.fallback[key];
-      }
-      return undefined;
+function createMessagesWithFallback(defaultLocale) {
+  return new Proxy(
+    {
+      fallback: emptydict,
+      primary: emptydict,
+      descriptor: { configurable: true, enumerable: true },
     },
-    set(ref, locale, messages) {
-      if (!messages) {
-        ref.primary = emptydict;
-        ref.fallback = emptydict;
+    {
+      getOwnPropertyDescriptor(ref, _key) {
+        return ref.descriptor;
+      },
+      get(ref, 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) {
+        if (!messages) {
+          ref.primary = emptydict;
+          ref.fallback = emptydict;
+          return true;
+        }
+        if (locale in messages) {
+          ref.primary = messages[locale];
+        } else {
+          ref.primary = emptydict;
+        }
+        if (defaultLocale in messages) {
+          ref.fallback = messages[defaultLocale];
+        } else {
+          ref.fallback = emptydict;
+        }
         return true;
-      }
-      if (locale in messages) {
-        ref.primary = messages[locale];
-      } else {
-        ref.primary = emptydict;
-      }
-      if (DEFAULT_LOCALE in messages) {
-        ref.fallback = messages[DEFAULT_LOCALE];
-      } else {
-        ref.fallback = emptydict;
-      }
-      return true;
+      },
     },
-  },
-);
+  );
+}
 
-export const getI18nMessages = (state) => {
-  memoizedMessages[state.env.language] = state.env.messages;
-  return memoizedMessages;
+export const getI18nMessagesFacade = (defaultLocale) => {
+  const memo = createMessagesWithFallback(defaultLocale);
+  return (state) => {
+    memo[state.env.language] = state.env.messages;
+    return memo;
+  };
 };
 
 export const getIsInitialized = (state) => state.runtime.initialized;

jest/setupTests.js

@@ -21,5 +21,3 @@ jest.mock("@linaria/react", () => {
 jest.mock("@linaria/core", () => ({
   css: jest.fn(() => ""),
 }));
-
-global.DEFAULT_LOCALE = "en-US";