Frontend rewritten in TypeScript, added Node 18 support

CHANGELOG.md

@@ -22,14 +22,9 @@ See also the [v0.107.51 GitHub milestone][ms-v0.107.51].
 
 NOTE: Add new changes BELOW THIS COMMENT.
 -->
-
 ### Changed
 
-- The HTTP server's write timeout has been increased from 1 minute to 5 minutes
-  to match the one used by AdGuard Home's HTTP client to fetch filtering-list
-  data ([#7041]).
-
-[#7041]: https://github.com/AdguardTeam/AdGuardHome/issues/7041
+Frontend rewritten in TypeScript, added Node 18 support
 
 <!--
 NOTE: Add new changes ABOVE THIS COMMENT.

README.md

@@ -206,7 +206,7 @@ Run `make init` to prepare the development environment.
 You will need this to build AdGuard Home:
 
 - [Go](https://golang.org/dl/) v1.22 or later;
-- [Node.js](https://nodejs.org/en/download/) v16 or later;
+- [Node.js](https://nodejs.org/en/download/) v18.18 or later;
 - [npm](https://www.npmjs.com/) v8 or later;
 - [yarn](https://yarnpkg.com/) v1.22.5 or later.
 

client/.eslintrc.json

@@ -1,9 +1,13 @@
 {
-    "parser": "babel-eslint",
+    "plugins": ["prettier"],
     "extends": [
+        "airbnb-base",
+        "prettier",
+        "eslint:recommended",
         "plugin:react/recommended",
-        "airbnb-base"
+        "plugin:@typescript-eslint/recommended"
     ],
+    "parser": "@typescript-eslint/parser",
     "env": {
         "jest": true,
         "node": true,
@@ -16,50 +20,21 @@
             "version": "16.4"
         },
         "import/resolver": {
-            "webpack": {
-                "config": "webpack.common.js"
+            "node": {
+                "extensions": [".js", ".jsx", ".ts", ".tsx"]
             }
         }
     },
     "rules": {
-        "indent": [
+        "@typescript-eslint/no-explicit-any": "off",
+        "import/extensions": [
             "error",
-            4,
+            "ignorePackages",
             {
-                "SwitchCase": 1,
-                "VariableDeclarator": 1,
-                "outerIIFEBody": 1,
-                "FunctionDeclaration": {
-                    "parameters": 1,
-                    "body": 1
-                },
-                "FunctionExpression": {
-                    "parameters": 1,
-                    "body": 1
-                },
-                "CallExpression": {
-                    "arguments": 1
-                },
-                "ArrayExpression": 1,
-                "ObjectExpression": 1,
-                "ImportDeclaration": 1,
-                "flatTernaryExpressions": false,
-                "ignoredNodes": [
-                    "JSXElement",
-                    "JSXElement > *",
-                    "JSXAttribute",
-                    "JSXIdentifier",
-                    "JSXNamespacedName",
-                    "JSXMemberExpression",
-                    "JSXSpreadAttribute",
-                    "JSXExpressionContainer",
-                    "JSXOpeningElement",
-                    "JSXClosingElement",
-                    "JSXText",
-                    "JSXEmptyExpression",
-                    "JSXSpreadChild"
-                ],
-                "ignoreComments": false
+                "js": "never",
+                "jsx": "never",
+                "ts": "never",
+                "tsx": "never"
             }
         ],
         "class-methods-use-this": "off",
@@ -68,10 +43,7 @@
         "no-console": [
             "warn",
             {
-                "allow": [
-                    "warn",
-                    "error"
-                ]
+                "allow": ["warn", "error"]
             }
         ],
         "import/no-extraneous-dependencies": [

client/.gitattributes

@@ -1 +1 @@
-*.js text eol=lf
+*.ts text eol=lf

client/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "printWidth": 120,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "bracketSameLine": true,
+  "tabWidth": 4,
+  "semi": true,
+  "arrowParens": "always",
+}

client/.stylelintrc.js

@@ -0,0 +1,44 @@
+module.exports = {
+  rules: {
+      "selector-type-no-unknown": true,
+      "block-closing-brace-empty-line-before": "never",
+      "block-no-empty": true,
+      "block-opening-brace-newline-after": "always",
+      "block-opening-brace-space-before": "always",
+      "color-hex-case": "lower",
+      "color-named": "never",
+      "color-no-invalid-hex": true,
+      "length-zero-no-unit": true,
+      "declaration-block-trailing-semicolon": "always",
+      "custom-property-empty-line-before": ["always", {
+          "except": [
+              "after-custom-property",
+              "first-nested"
+          ]
+      }],
+      "declaration-block-no-duplicate-properties": true,
+      "declaration-colon-space-after": "always",
+      "declaration-empty-line-before": ["always", {
+          "except": [
+              "after-declaration",
+              "first-nested",
+              "after-comment"
+          ]
+      }],
+      "font-weight-notation": "numeric",
+      "indentation": [4, {
+          "except": ["value"]
+      }],
+      "max-empty-lines": 2,
+      "no-missing-end-of-source-newline": true,
+      "number-leading-zero": "always",
+      "property-no-unknown": true,
+      "rule-empty-line-before": ["always-multi-line", {
+          "except": ["first-nested"],
+          "ignore": ["after-comment"]
+      }],
+      "string-quotes": "double",
+      "value-list-comma-space-after": "always",
+      "unit-case": "lower"
+  }
+}

client/babel.config.cjs

@@ -0,0 +1,14 @@
+module.exports = (api) => {
+    api.cache(false);
+    return {
+        presets: ['@babel/preset-env', '@babel/preset-typescript', '@babel/preset-react'],
+        plugins: [
+            '@babel/plugin-transform-runtime',
+            '@babel/plugin-transform-class-properties',
+            '@babel/plugin-transform-object-rest-spread',
+            '@babel/plugin-transform-nullish-coalescing-operator',
+            '@babel/plugin-transform-optional-chaining',
+            'react-hot-loader/babel',
+        ],
+    };
+};

client/constants.js

@@ -1,11 +1,6 @@
-const BUILD_ENVS = {
+export const BUILD_ENVS = {
     dev: 'development',
     prod: 'production',
 };
 
-const BASE_URL = 'control';
-
-module.exports = {
-    BUILD_ENVS,
-    BASE_URL,
-};
+export const BASE_URL = 'control';

client/global.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+
+declare module '*.svg' {
+    const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    export default content;
+}

client/jest.config.mjs

@@ -0,0 +1,6 @@
+export default {
+    testEnvironment: 'jsdom',
+    transform: {
+        '^.+\\.tsx?$': 'babel-jest',
+    },
+};