build: Good bye babel!

6 files changed, 17 insertions, 53 deletions

diff --git a/FrontEnd/package.json b/FrontEnd/package.json
index e3bcb58e..c24be5ed 100644
--- a/FrontEnd/package.json
+++ b/FrontEnd/package.json
@@ -58,15 +58,6 @@
     ]

   },

   "devDependencies": {

-    "@babel/core": "^7.14.3",

-    "@babel/plugin-proposal-class-properties": "^7.12.13",

-    "@babel/plugin-proposal-decorators": "^7.14.2",

-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",

-    "@babel/plugin-proposal-optional-chaining": "^7.14.2",

-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",

-    "@babel/preset-env": "^7.14.4",

-    "@babel/preset-react": "^7.13.13",

-    "@babel/preset-typescript": "^7.13.0",

     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-beta.9",

     "@types/color": "^3.0.1",

     "@types/lodash": "^4.14.170",

@@ -83,8 +74,6 @@
     "@types/xregexp": "^4.4.0",

     "@typescript-eslint/eslint-plugin": "^4.26.0",

     "@typescript-eslint/parser": "^4.26.0",

-    "babel-loader": "^8.2.2",

-    "babel-plugin-transform-builtin-extend": "^1.1.2",

     "clean-webpack-plugin": "^3.0.0",

     "copy-webpack-plugin": "^9.0.0",

     "css-loader": "^5.2.6",

@@ -101,6 +90,7 @@
     "postcss-preset-env": "^6.7.0",

     "prettier": "^2.3.0",

     "react-refresh": "^0.10.0",

+    "react-refresh-typescript": "^2.0.1",

     "sass": "^1.34.0",

     "sass-loader": "^12.0.0",

     "style-loader": "^2.0.0",

@@ -110,7 +100,7 @@
     "webpack": "^5.38.1",

     "webpack-chain": "^6.5.1",

     "webpack-cli": "^4.7.0",

-    "webpack-dev-server": "^3.11.2",

+    "webpack-dev-server": "^4.0.0-beta.3",

     "workbox-webpack-plugin": "^6.1.5"

   }

 }

diff --git a/FrontEnd/src/app/App.tsx b/FrontEnd/src/app/App.tsx
index 6431ebbb..a28b99ae 100644
--- a/FrontEnd/src/app/App.tsx
+++ b/FrontEnd/src/app/App.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactElement } from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 
 import AppBar from "./views/common/AppBar";
@@ -23,7 +23,7 @@ const LazyAdmin = React.lazy(
   () => import(/* webpackChunkName: "admin" */ "./views/admin/Admin")
 );
 
-const App: React.FC = () => {
+function App(): ReactElement | null {
   const user = useRawUser();
 
   React.useEffect(() => {
@@ -82,6 +82,6 @@ const App: React.FC = () => {
       </React.Suspense>
     );
   }
-};
+}
 
 export default App;
diff --git a/FrontEnd/src/app/views/about/index.tsx b/FrontEnd/src/app/views/about/index.tsx
index d63b6996..a50164a9 100644
--- a/FrontEnd/src/app/views/about/index.tsx
+++ b/FrontEnd/src/app/views/about/index.tsx
@@ -25,10 +25,6 @@ const frontendCredits: {
     url: "https://react-bootstrap.github.io",
   },
   {
-    name: "babeljs",
-    url: "https://babeljs.io",
-  },
-  {
     name: "webpack",
     url: "https://webpack.js.org",
   },
diff --git a/FrontEnd/src/tsconfig.json b/FrontEnd/src/tsconfig.json
index 1855f5cd..21989043 100644
--- a/FrontEnd/src/tsconfig.json
+++ b/FrontEnd/src/tsconfig.json
@@ -1,6 +1,6 @@
 {

   "compilerOptions": {

-    "target": "esnext",

+    "target": "ES6",

     "allowJs": true,

     "skipLibCheck": true,

     "esModuleInterop": true,

@@ -11,13 +11,11 @@
     "moduleResolution": "node",

     "resolveJsonModule": true,

     "isolatedModules": true,

-    "jsx": "preserve",

+    "jsx": "react",

     "sourceMap": true,

     "baseUrl": "./",

     "paths": {

-      "@/*": [

-        "app/*"

-      ]

+      "@/*": ["app/*"]

     }

   }

 }

diff --git a/FrontEnd/webpack.common.js b/FrontEnd/webpack.common.js
index e957a399..94cdf694 100644
--- a/FrontEnd/webpack.common.js
+++ b/FrontEnd/webpack.common.js
@@ -7,27 +7,15 @@ const config = new Config();
 config.entry("index").add(path.resolve(__dirname, "src/app/index.tsx"));

 

 config.module

-  .rule("ts")

-  .test(/\.ts(x?)$/)

+  .rule("jsts")

+  .test(/\.[jt]sx?$/)

   .exclude.add(/node_modules/)

   .end()

-  .use("babel")

-  .loader("babel-loader")

-  .end()

   .use("ts")

   .loader("ts-loader")

   .end();

 

 config.module

-  .rule("js")

-  .test(/\.js(x?)$/)

-  .exclude.add(/node_modules/)

-  .end()

-  .use("babel")

-  .loader("babel-loader")

-  .end();

-

-config.module

   .rule("css")

   .test(/\.css$/)

   .use("css")

diff --git a/FrontEnd/webpack.config.dev.js b/FrontEnd/webpack.config.dev.js
index a657861b..4c6031c7 100644
--- a/FrontEnd/webpack.config.dev.js
+++ b/FrontEnd/webpack.config.dev.js
@@ -1,22 +1,18 @@
 const path = require("path");

 const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");

+const ReactRefreshTypeScript = require("react-refresh-typescript");

 

 const config = require("./webpack.common");

 

 config.mode("development");

 

 config.module

-  .rule("ts")

-  .use("babel")

+  .rule("jsts")

+  .use("ts")

   .options({

-    plugins: ["react-refresh/babel"],

-  });

-

-config.module

-  .rule("js")

-  .use("babel")

-  .options({

-    plugins: ["react-refresh/babel"],

+    getCustomTransformers: () => ({

+      before: [ReactRefreshTypeScript()],

+    }),

   });

 

 config.module

@@ -35,11 +31,7 @@ config.module
 

 config.devtool("eval-cheap-module-source-map");

 

-config.devServer

-  .contentBase(path.resolve(__dirname, "public/"))

-  .port(3000)

-  .historyApiFallback(true)

-  .hot(true);

+config.devServer.port(3000).historyApiFallback(true).hot(true);

 

 config.plugin("react-refresh").use(new ReactRefreshWebpackPlugin());