Merge branch 'master' into 7069-fix-blocked-services

CHANGELOG.md

@@ -27,6 +27,14 @@ See also the [v0.107.52 GitHub milestone][ms-v0.107.52].
 NOTE: Add new changes BELOW THIS COMMENT.
 -->
 
+### Changed
+
+- Frontend rewritten in TypeScript.
+
+### Deprecated
+
+- Node 18 support, Node 20 will be required in future releases.
+
 ### Fixed
 
 - Panic caused by missing user-specific blocked services object in configuration

README.md

@@ -206,9 +206,8 @@ 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.
 
 ### <a href="#building" id="building" name="building">Building</a>
 
@@ -220,14 +219,6 @@ cd AdGuardHome
 make
 ```
 
-#### <a href="#building-node" id="building-node" name="building-node">Building with Node.js 17 and later</a>
-
-In order to build AdGuard Home with Node.js 17 and later, specify `--openssl-legacy-provider` option.
-
-```sh
-export NODE_OPTIONS=--openssl-legacy-provider
-```
-
 > [!WARNING]
 > The non-standard `-j` flag is currently not supported, so building with `make -j 4` or setting your `MAKEFLAGS` to include, for example, `-j 4` is likely to break the build. If you do have your `MAKEFLAGS` set to that, and you don't want to change it, you can override it by running `make -j 1`.
 

bamboo-specs/release.yaml

@@ -7,7 +7,7 @@
 # Make sure to sync any changes with the branch overrides below.
 'variables':
  'channel': 'edge'
- 'dockerFrontend': 'adguard/home-js-builder:1.1'
+ 'dockerFrontend': '${bamboo.adguardRegistryBasePath}/home-js-builder:2.0'
  'dockerGo': '${bamboo.adguardRegistryBasePath}/go-builder:1.22.4--1'
 
 'stages':
@@ -265,7 +265,7 @@
  # need to build a few of these.
  'variables':
  'channel': 'beta'
- 'dockerFrontend': 'adguard/home-js-builder:1.1'
+ 'dockerFrontend': '${bamboo.adguardRegistryBasePath}/home-js-builder:2.0'
  'dockerGo': '${bamboo.adguardRegistryBasePath}/go-builder:1.22.4--1'
  # release-vX.Y.Z branches are the branches from which the actual final
  # release is built.
@@ -281,5 +281,5 @@
  # are the ones that actually get released.
  'variables':
  'channel': 'release'
- 'dockerFrontend': 'adguard/home-js-builder:1.1'
+ 'dockerFrontend': '${bamboo.adguardRegistryBasePath}/home-js-builder:2.0'
  'dockerGo': '${bamboo.adguardRegistryBasePath}/go-builder:1.22.4--1'

bamboo-specs/test.yaml

@@ -5,7 +5,7 @@
  'key': 'AHBRTSPECS'
  'name': 'AdGuard Home - Build and run tests'
 'variables':
- 'dockerFrontend': 'adguard/home-js-builder:1.1'
+ 'dockerFrontend': '${bamboo.adguardRegistryBasePath}/home-js-builder:2.0'
  'dockerGo': '${bamboo.adguardRegistryBasePath}/go-builder:1.22.4--1'
  'channel': 'development'
 
@@ -194,6 +194,6 @@
  # Set the default release channel on the release branch to beta, as we
  # may need to build a few of these.
  'variables':
- 'dockerFrontend': 'adguard/home-js-builder:1.1'
+ 'dockerFrontend': '${bamboo.adguardRegistryBasePath}/home-js-builder:2.0'
  'dockerGo': '${bamboo.adguardRegistryBasePath}/go-builder:1.22.4--1'
  'channel': 'candidate'

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',
+ },
+};