Fixed react-svg config

Author: Daniil Yankouski

configs/vite/plugins.ts

@@ -1,6 +1,6 @@
 import importToCDN, { autoComplete } from 'vite-plugin-cdn-import';
 import viteCompression from 'vite-plugin-compression';
-import reactSvgPlugin from 'vite-plugin-react-svg';
+import reactSvgPlugin from './plugins/react-svg';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import react from '@vitejs/plugin-react'
 
@@ -12,15 +12,13 @@ const BasePlugins = [
   reactSvgPlugin({
     defaultExport: 'component',
     expandProps: 'end',
-    memo: false,
-    ref: false,
+    memo: true,
+    ref: true,
     replaceAttrValues: null,
     svgProps: null,
     svgo: true,
     svgoConfig: {
-      plugins: {
-        removeViewBox: false,
-      },
+      removeViewBox: false,
     },
     titleProp: false,
   }),

configs/vite/plugins/react-svg/index.js

@@ -0,0 +1,96 @@
+
+   
+const { transform } = require('@svgr/core');
+const { readFileSync } = require('fs');
+
+async function compileSvg(source, id, options) {
+  const code = await transform(
+    source,
+    {
+      ...options,
+      runtimeConfig: false,
+      plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'],
+      jsx: {
+        babelConfig: {
+          plugins: [
+            [
+              '@babel/plugin-transform-react-jsx',
+              {
+                useBuiltIns: true,
+              },
+            ],
+          ],
+        },
+      },
+    },
+    {
+      filePath: id,
+    },
+  );
+
+  return code;
+}
+
+module.exports = (options = {}) => {
+  const {
+    defaultExport = 'url',
+    svgoConfig,
+    expandProps,
+    svgo,
+    ref,
+    memo,
+    replaceAttrValues,
+    svgProps,
+    titleProp,
+  } = options;
+
+  const cache = new Map();
+  const svgRegex = /\.svg(?:\?(component|url))?$/;
+
+  return {
+    name: 'react-svg',
+    async transform(source, id, isBuild) {
+      const result = id.match(svgRegex);
+
+      if (result) {
+        const type = result[1];
+
+        if (
+          (defaultExport === 'url' && typeof type === 'undefined') ||
+          type === 'url'
+        ) {
+          return source;
+        }
+
+        if (
+          (defaultExport === 'component' && typeof type === 'undefined') ||
+          type === 'component'
+        ) {
+          const idWithoutQuery = id.replace('.svg?component', '.svg');
+          let result = cache.get(idWithoutQuery);
+
+          if (!result) {
+            const code = readFileSync(idWithoutQuery);
+
+            result = await compileSvg(code, idWithoutQuery, {
+              svgoConfig,
+              expandProps,
+              svgo,
+              ref,
+              memo,
+              replaceAttrValues,
+              svgProps,
+              titleProp,
+            });
+
+            if (isBuild) {
+              cache.set(idWithoutQuery, result);
+            }
+          }
+
+          return result;
+        }
+      }
+    },
+  };
+};

package.json

@@ -47,6 +47,9 @@
     "@babel/preset-env": "7.16.11",
     "@babel/preset-typescript": "7.16.7",
     "@babel/register": "7.17.0",
+    "@svgr/core": "^6.2.1",
+    "@svgr/plugin-jsx": "^6.2.1",
+    "@svgr/plugin-svgo": "^6.2.0",
     "@testing-library/react": "12.1.3",
     "@types/jest": "27.4.1",
     "@typescript-eslint/eslint-plugin": "5.13.0",
@@ -70,7 +73,6 @@
     "vite": "2.8.6",
     "vite-plugin-cdn-import": "0.3.5",
     "vite-plugin-compression": "0.5.1",
-    "vite-plugin-react-svg": "0.2.0",
     "vite-tsconfig-paths": "3.4.1"
   },
   "prettier": {

src/core/adapters/i18next/i18next.adapter.ts

@@ -11,7 +11,7 @@ export class I18nextAdapter implements I18n<i18next> {
 
   @observable private _loading = true;
 
-  @observable private _changeLanguage = false;
+  @observable private _language: I18nLanguages = I18nLanguages.en;
 
   constructor() {
     makeAutoObservable(this);
@@ -22,8 +22,10 @@ export class I18nextAdapter implements I18n<i18next> {
     this._loading = value;
   };
 
-  @action private _setChangeLanguage = (value: boolean): void => {
-    this._changeLanguage = value;
+  @action private _setLanguage = async (value: I18nLanguages): Promise<void> => {
+    await this._instance.changeLanguage(value);
+    await this._instance.reloadResources();
+    this._language = value;
   };
 
   private initialize = async (): Promise<void> => {
@@ -84,29 +86,23 @@ export class I18nextAdapter implements I18n<i18next> {
     return this._loading;
   };
 
-  @computed isChanged = (): boolean => {
-    return this._changeLanguage;
-  };
-
   getInstance = (): i18next => {
     return this._instance;
   };
 
-  getLanguage = (): I18nLanguages => {
-    return this._instance.language as I18nLanguages;
+  @computed getLanguage = (): I18nLanguages => {
+    return this._language || (this._instance.language as I18nLanguages);
   };
 
   changeLanguage = async (language: I18nLanguages): Promise<boolean> => {
     try {
-      this._setChangeLanguage(true);
-      await this._instance.changeLanguage(language);
-      await this._instance.reloadResources();
+      await this._setLanguage(language);
 
       return true;
     } catch (error) {
+      await this._setLanguage(I18nLanguages.en);
+
       return false;
-    } finally {
-      this._setChangeLanguage(false);
     }
   };
 }

src/core/i18n/i18n.ts

@@ -4,7 +4,6 @@ export interface I18n<InstanceType = any> {
   getInstance(): InstanceType;
   isInitialized(): boolean;
   isLoading(): boolean;
-  isChanged(): boolean;
   changeLanguage(language: I18nLanguages): Promise<boolean>;
   getLanguage(): I18nLanguages;
 }

src/presentation/web/components/common/button/button.component.tsx

@@ -1,6 +1,6 @@
 import isFunction from 'lodash/isFunction';
 import React, { useCallback } from 'react';
-import DotsLoader from 'assets/images/dots-loader.svg';
+// import DotsLoader from 'assets/images/dots-loader.svg';
 import { ButtonWrapper, LoaderWrapper } from './button.styles';
 import { ButtonProps } from './button.typings';
 
@@ -17,11 +17,7 @@ export function Button(props: ButtonProps): React.ReactElement {
 
   return (
     <ButtonWrapper {...rest} disabled={disabled} isLoading={loading} onClick={handleClick}>
-      {loading && (
-        <LoaderWrapper>
-          <DotsLoader />
-        </LoaderWrapper>
-      )}
+      {loading && <LoaderWrapper>{/* <DotsLoader /> */}</LoaderWrapper>}
       {children}
     </ButtonWrapper>
   );

src/presentation/web/components/i18n/i18n.hoc.tsx

@@ -1,6 +1,6 @@
 import { observer } from 'mobx-react';
 import React, { FunctionComponent, ReactElement } from 'react';
-import DotsLoader from 'assets/images/dots-loader.svg';
+// import DotsLoader from 'assets/images/dots-loader.svg';
 import { getDisplayName } from 'presentation/web/hoc/hoc.helpers';
 import { useTranslation } from './i18n.hook';
 
@@ -9,7 +9,7 @@ export function withI18n<T>(WrappedComponent: FunctionComponent<T>): FunctionCom
     const { adapter } = useTranslation();
 
     if (adapter.isLoading()) {
-      return <DotsLoader fill="#ff9922" />;
+      return null;
     }
 
     return (

src/presentation/web/components/i18n/i18n.hook.ts

@@ -1,20 +1,20 @@
 import { i18n as i18next } from 'i18next';
-import { I18n, I18nType } from 'core/i18n';
+import { I18n, I18nLanguages, I18nType } from 'core/i18n';
 import { useInjection } from '..';
 
 export function useTranslation(): {
   t: i18next['t'];
   i18n: i18next;
   adapter: I18n;
-  isChanged: boolean;
+  language: I18nLanguages;
 } {
   const i18next: I18n<i18next> = useInjection(I18nType);
   const instance = i18next.getInstance();
 
   return {
     adapter: i18next,
     i18n: instance,
-    isChanged: i18next.isChanged(),
+    language: i18next.getLanguage(),
     t: instance.t,
   };
 }

src/presentation/web/components/index.ts

@@ -1,2 +1 @@
 export { IoC, useInjection } from './ioc';
-export { Route } from './route';