Configure babel loader, imporove building by transform ts and runtime…

config/babel/babelPemovePropsPlugin.ts

@@ -0,0 +1,21 @@
+import { PluginItem } from '@babel/core';
+
+export default function (): PluginItem {
+    return {
+        visitor: {
+            Program(path, state) {
+                const forbidden = state.opts.props || [];
+
+                path.traverse({
+                    JSXIdentifier(current) {
+                        const nodeName = current.node.name;
+
+                        if (forbidden.includes(nodeName)) {
+                            current.parentPath.remove();
+                        }
+                    },
+                });
+            },
+        },
+    };
+}

config/build/buildLoaders.ts

@@ -11,17 +11,11 @@ export function buildLoaders(options: BuildOptions): webpack.RuleSetRule[] {
     };
 
     // So far I have disconnected this Lowder because of Extractranslations creating files each time
-    const babelLoader = babelLoaders(options);
+    const codeBabelLoader = babelLoaders({...options, isTsx: false});
+    const tsxCodeBabelLoader = babelLoaders({...options, isTsx: true});
 
     const cssLoader = buildCssLoader(isDev);
 
-    // Если не используется typeScript - нужен babel-loader
-    const typescirptLoader = {
-        test: /\.tsx?$/,
-        use: 'ts-loader',
-        exclude: /node_modules/,
-    };
-
     const fontLoader = {
         test: /\.(woff|woff2|eot|ttf|otf)$/i,
         type: 'asset/resource',
@@ -39,8 +33,8 @@ export function buildLoaders(options: BuildOptions): webpack.RuleSetRule[] {
     return [
         fileLoader,
         svgLoader,
-        babelLoader,
-        typescirptLoader,
+        codeBabelLoader,
+        tsxCodeBabelLoader,
         cssLoader,
         fontLoader,
     ];

config/build/loaders/babelLoader.ts

@@ -1,8 +1,13 @@
+import babelPemovePropsPlugin from '../../babel/babelPemovePropsPlugin';
 import { BuildOptions } from '../types/config';
 
-export function babelLoaders({ isDev }: BuildOptions) {
+interface BuildBabelLoaderProps extends BuildOptions {
+    isTsx?: boolean;
+}
+
+export function babelLoaders({ isDev, isTsx }: BuildBabelLoaderProps) {
     return {
-        test: /\.(js|jsx|tsx)$/,
+        test: isTsx ? /\.(jsx|tsx)$/ : /\.(js|ts)$/,
         exclude: /node_modules/,
         use: {
             loader: 'babel-loader',
@@ -16,6 +21,18 @@ export function babelLoaders({ isDev }: BuildOptions) {
                             keyAsDefaultValue: true,
                         },
                     ],
+                    [
+                        "@babel/plugin-transform-typescript",
+                        {
+                            isTsx
+                        }
+                    ],
+                    "@babel/plugin-transform-runtime",
+                    isTsx && !isDev && [babelPemovePropsPlugin,
+                        {
+                            props: ['data-testid']
+                        }
+                    ],
                     isDev && require.resolve('react-refresh/babel'),
                 ].filter(Boolean),
             },

extractedTranslations/ru/about.json

@@ -0,0 +1,3 @@
+{
+  "About us": "About us"
+}

extractedTranslations/ru/article-details.json

@@ -0,0 +1,9 @@
+{
+  "An error occurred while loading the article": "An error occurred while loading the article",
+  "Back to list": "Back to list",
+  "Comments": "Comments",
+  "Enter the comment": "Enter the comment",
+  "Error": "Error",
+  "Recommendations": "Recommendations",
+  "Send comment": "Send comment"
+}

extractedTranslations/ru/article.json

@@ -0,0 +1,17 @@
+{
+  "All articles": "All articles",
+  "Articles not found": "Articles not found",
+  "Economics": "Economics",
+  "Error": "Error",
+  "IT": "IT",
+  "Read more": "Read more",
+  "Science": "Science",
+  "Search": "Search",
+  "Sort by": "Sort by",
+  "ascending": "ascending",
+  "by": "by",
+  "created at": "created at",
+  "descending": "descending",
+  "title": "title",
+  "views": "views"
+}

extractedTranslations/ru/comments.json

@@ -0,0 +1,3 @@
+{
+  "No comments": "No comments"
+}

extractedTranslations/ru/main.json

@@ -0,0 +1,3 @@
+{
+  "Main page": "Main page"
+}

extractedTranslations/ru/profile.json

@@ -0,0 +1,22 @@
+{
+  "Cancel": "Cancel",
+  "City": "City",
+  "Edit": "Edit",
+  "Enter link to avatar": "Enter link to avatar",
+  "Enter username": "Enter username",
+  "Profile": "Profile",
+  "Save": "Save",
+  "Select country": "Select country",
+  "There was an error": "There was an error",
+  "Try to update the page": "Try to update the page",
+  "Your age": "Your age",
+  "Your lastname": "Your lastname",
+  "Your name": "Your name",
+  "errors": {
+    "incorrectAge": "incorrectAge",
+    "incorrectCountry": "incorrectCountry",
+    "incorrectUserData": "incorrectUserData",
+    "noData": "noData",
+    "serverError": "serverError"
+  }
+}

package.json

@@ -34,6 +34,8 @@
     "license": "ISC",
     "devDependencies": {
         "@babel/core": "^7.17.5",
+        "@babel/plugin-transform-runtime": "^7.18.10",
+        "@babel/plugin-transform-typescript": "^7.18.12",
         "@babel/preset-env": "^7.16.11",
         "@babel/preset-react": "^7.16.7",
         "@babel/preset-typescript": "^7.16.7",