Cleanup localeFlags.ts [skip ci]

packages/app/components/i18n/index.ts

@@ -1,2 +1,2 @@
 export { default as IntlProvider } from './IntlProvider';
-export { default as localeFlags } from './localeFlags';
+export * from './localeFlags';

packages/app/components/i18n/localeFlags.ts

@@ -11,42 +11,36 @@ const localeToCountryCode: Record<string, string> = {
     zh: 'cn',
     cs: 'cz',
 };
-const SUPPORTED_LANGUAGES: string[] = Object.keys(supportedLocales);
+const SUPPORTED_LANGUAGES: ReadonlyArray<string> = Object.keys(supportedLocales);
 
-export default {
+export function getCountriesList(): string[] {
-    getCountryList(): string[] {
+    return SUPPORTED_LANGUAGES.map((locale) => localeToCountryCode[locale] || locale);
-        return SUPPORTED_LANGUAGES.map((locale) => localeToCountryCode[locale] || locale);
+}
-    },
 
-    /**
+const flagIconLoadingChain: ReadonlyArray<(locale: string) => string | { default: string }> = [
-     * Возвращает для указанной локали её флаг с учётом всех нюансов загрузки флага
+    (locale) => require(`./flags/${locale}.svg`),
-     * и подбора соответствующего локали флага.
+    (locale) => require(`flag-icon-css/flags/4x3/${localeToCountryCode[locale] || locale}.svg`),
-     *
+    () => require('./flags/unknown.svg'),
-     * @param {string} locale
+];
-     *
-     * @returns {string}
-     */
-    getIconUrl(locale: string): string {
-        let mod;
 
+/**
+ * Возвращает для указанной локали её флаг с учётом всех нюансов загрузки флага
+ * и подбора соответствующего локали флага.
+ *
+ * @param {string} locale
+ *
+ * @returns {string}
+ */
+export function getLocaleIconUrl(locale: string): string {
+    for (const flagIconLoadingChainElement of flagIconLoadingChain) {
         try {
-            mod = require(`./flags/${locale}.svg`);
+            const mod = flagIconLoadingChainElement(locale);
-        } catch (err1) {
-            if (!err1.message.startsWith('Cannot find module')) {
-                throw err1;
-            }
 
-            try {
+            return mod.default || mod;
-                mod = require(`flag-icon-css/flags/4x3/${localeToCountryCode[locale] || locale}.svg`);
+        } catch (err) {
-            } catch (err2) {
+            if (!err.message.startsWith('Cannot find module')) {
-                if (!err2.message.startsWith('Cannot find module')) {
+                throw err;
-                    throw err2;
-                }
-
-                mod = require('./flags/unknown.svg');
             }
         }
-
+    }
-        return mod.default || mod;
+}
-    },
-};

packages/app/components/languageSwitcher/LocaleItem.tsx

@@ -1,5 +1,5 @@
 import React, { ComponentType, ReactNode } from 'react';
-import { localeFlags } from 'app/components/i18n';
+import { getLocaleIconUrl } from 'app/components/i18n';
 import { FormattedMessage as Message } from 'react-intl';
 
 import styles from './languageSwitcher.scss';
@@ -31,7 +31,7 @@ const LocaleItem: ComponentType<Props> = ({ locale: { code, name, englishName, p
             <div
                 className={styles.languageIco}
                 style={{
-                    backgroundImage: `url('${localeFlags.getIconUrl(code)}')`,
+                    backgroundImage: `url('${getLocaleIconUrl(code)}')`,
                 }}
             />
             <div className={styles.languageCaptions}>

packages/app/components/languageSwitcher/changeLanguageLink/ChangeLanguageLink.tsx

@@ -1,7 +1,7 @@
 import React, { ComponentType, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import clsx from 'clsx';
-import { localeFlags } from 'app/components/i18n';
+import { getLocaleIconUrl } from 'app/components/i18n';
 import LANGS from 'app/i18n';
 import { create as createPopup } from 'app/components/ui/popup/actions';
 import LanguageSwitcher from 'app/components/languageSwitcher';
@@ -30,7 +30,7 @@ const LanguageLink: ComponentType = () => {
             <span
                 className={styles.languageIcon}
                 style={{
-                    backgroundImage: `url('${localeFlags.getIconUrl(localeDefinition.code)}')`,
+                    backgroundImage: `url('${getLocaleIconUrl(localeDefinition.code)}')`,
                 }}
             />
             {localeDefinition.name}

webpack.config.js

@@ -17,7 +17,7 @@ const EagerImportsPlugin = require('eager-imports-webpack-plugin').default;
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const config = require('./config');
 const SUPPORTED_LANGUAGES = Object.keys(require('app/i18n').default);
-const localeFlags = require('app/components/i18n/localeFlags').default;
+const { getCountriesList } = require('app/components/i18n/localeFlags');
 const rootPath = path.resolve('./packages');
 const outputPath = path.join(__dirname, 'build');
 
@@ -112,12 +112,12 @@ const webpackConfig = {
         // @see components/i18n/localeFlags.js
         new webpack.ContextReplacementPlugin(
             /flag-icon-css\/flags\/4x3/,
-            new RegExp(`/(${localeFlags.getCountryList().join('|')})\\.svg`),
+            new RegExp(`/(${getCountriesList().join('|')})\\.svg`),
         ),
         // @see components/i18n/localeFlags.js
         new webpack.ContextReplacementPlugin(
             /app\/components\/i18n\/flags/,
-            new RegExp(`/(${localeFlags.getCountryList().join('|')})\\.svg`),
+            new RegExp(`/(${getCountriesList().join('|')})\\.svg`),
         ),
     ],