Add typescript support and change webpack and babel config

This commit adds full Typescript support. Although .js files will keep on working normally, it's encouraged that new files are created with either .tsx(for components) or .ts(for non components) extensions.

Also, a linter with some basic settings for React and Typescript has been added. These settings can be changed at any time if needed.

frontend/.eslintrc.json

@@ -0,0 +1,26 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "@typescript-eslint",
+    "react-hooks"
+  ],
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/prop-types": "off"
+  },
+  "settings": {
+    "react": {
+      "pragma": "React",
+      "version": "detect"
+    }
+  }
+}

frontend/babel.config.json

@@ -1,14 +1,15 @@
 {
-    "presets": [
-      [
-        "@babel/preset-env",
-        {
-          "targets": {
-            "node": "10"
-          }
-        }
-      ],
-      "@babel/preset-react"
-    ],
-    "plugins": ["@babel/plugin-proposal-class-properties"]
-  }
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "regenerator": true
+      }
+    ]
+  ]
+}

frontend/package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "dev": "webpack --mode development --watch",
+    "dev": "webpack --watch --progress --mode development",
     "test": "jest",
     "build": "webpack --mode production"
   },
@@ -12,16 +12,26 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@babel/core": "^7.16.7",
-    "@babel/preset-env": "^7.16.7",
+    "@babel/core": "^7.17.9",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
-    "babel-loader": "^8.2.3",
+    "@babel/preset-typescript": "^7.16.7",
+    "@babel/runtime": "^7.17.9",
+    "@types/react": "^17.0.44",
+    "@types/react-dom": "^18.0.1",
+    "@types/webpack": "^5.28.0",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
+    "babel-loader": "^8.2.5",
+    "eslint": "^8.13.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.4.0",
     "jest": "^27.5.1",
-    "openpgp": "^5.2.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "webpack": "^5.65.0",
-    "webpack-cli": "^4.9.1"
+    "ts-node": "^10.7.0",
+    "typescript": "^4.6.3",
+    "webpack": "^5.72.0",
+    "webpack-cli": "^4.9.2"
   },
   "dependencies": {
     "@babel/plugin-proposal-class-properties": "^7.16.7",
@@ -29,6 +39,7 @@
     "@emotion/styled": "^11.6.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
+    "@mui/base": "^5.0.0-alpha.77",
     "@mui/icons-material": "^5.2.5",
     "@mui/lab": "^5.0.0-alpha.73",
     "@mui/material": "^5.2.7",
@@ -41,7 +52,10 @@
     "i18next-http-backend": "^1.4.0",
     "i18next-xhr-backend": "^3.2.2",
     "material-ui-image": "^3.3.2",
+    "openpgp": "^5.2.1",
+    "react": "^18.0.0",
     "react-countdown": "^2.3.2",
+    "react-dom": "^18.0.0",
     "react-i18next": "^11.16.2",
     "react-native": "^0.66.4",
     "react-native-svg": "^12.3.0",

frontend/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": ["src"]
+}

frontend/webpack.config.js

@@ -1,37 +0,0 @@
-const path = require("path");
-const webpack = require("webpack");
-
-module.exports = {
-  entry: "./src/index.js",
-  output: {
-    path: path.resolve(__dirname, "./static/frontend"),
-    filename: "[name].js",
-  },
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        exclude: /node_modules/,
-        use: {
-          loader: "babel-loader",
-        },
-      },
-    ],
-  },
-  optimization: {
-    minimize: true,
-  },
- 
-  plugins: [
-    new webpack.DefinePlugin({
-      "process.env": {
-        // This has effect on the react lib size
-        NODE_ENV: JSON.stringify("production"),
-      },
-    }),
-    //new webpack.optimize.AggressiveMergingPlugin() //Merge chunks 
-  ],
-  resolve: {
-    extensions: ['.ts', '.js'],
-  },
-};

frontend/webpack.config.ts

@@ -0,0 +1,33 @@
+import path from "path";
+import { Configuration } from "webpack";
+
+const config: Configuration = {
+  entry: "./src/index.js",
+  module: {
+    rules: [
+      {
+        test: /\.(ts|js)x?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: [
+              "@babel/preset-env",
+              "@babel/preset-react",
+              "@babel/preset-typescript",
+            ],
+          },
+        },
+      },
+    ],
+  },
+  resolve: {
+    extensions: [".tsx", ".ts", ".jsx", ".js"],
+  },
+  output: {
+    path: path.resolve(__dirname, "static/frontend"),
+    filename: "main.js",
+  },
+};
+
+export default config;