WebUI: Convert JS files to TypeScript

.github/workflows/ci_macos.yaml

@@ -32,6 +32,11 @@ jobs:
         with:
           persist-credentials: false
 
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+
       - name: Install dependencies
         uses: Wandalen/wretry.action@v3
         env:
@@ -103,6 +108,11 @@ jobs:
           cmake --build build
           sudo cmake --install build
 
+      - name: Install node dependencies
+        working-directory: src/webui/www
+        run: |
+          npm install
+
       - name: Build qBittorrent
         run: |
           CXXFLAGS="$CXXFLAGS -DQT_FORCE_ASSERTS -Werror -Wno-error=deprecated-declarations" \

.github/workflows/ci_ubuntu.yaml

@@ -34,6 +34,11 @@ jobs:
         with:
           persist-credentials: false
 
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+
       - name: Install dependencies
         run: |
           sudo apt update
@@ -98,6 +103,11 @@ jobs:
           cmake --build build
           sudo cmake --install build
 
+      - name: Install node dependencies
+        working-directory: src/webui/www
+        run: |
+          npm install
+
       # to avoid scanning 3rdparty codebases, initialize it just before building qbt
       - name: Initialize CodeQL
         uses: github/codeql-action/init@v3

.github/workflows/ci_webui.yaml

@@ -38,6 +38,9 @@ jobs:
           npm ls --all
           echo "::endgroup::"
 
+      - name: Compile TS
+        run: npm run build
+
       - name: Run tests
         run: npm test
 

.github/workflows/ci_windows.yaml

@@ -31,6 +31,11 @@ jobs:
         with:
           persist-credentials: false
 
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+
       - name: Setup devcmd
         uses: ilammy/msvc-dev-cmd@v1
 
@@ -138,6 +143,11 @@ jobs:
           cmake --build build
           cmake --install build
 
+      - name: Install node dependencies
+        working-directory: src/webui/www
+        run: |
+          npm install
+
       - name: Build qBittorrent
         run: |
           $env:CXXFLAGS+="/DQT_FORCE_ASSERTS /WX"

.github/workflows/coverity-scan.yaml

@@ -29,6 +29,11 @@ jobs:
         with:
           persist-credentials: false
 
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+
       - name: Install dependencies
         run: |
           sudo apt update
@@ -82,6 +87,11 @@ jobs:
           cmake --build build
           sudo cmake --install build
 
+      - name: Install node dependencies
+        working-directory: src/webui/www
+        run: |
+          npm install
+
       - name: Download Coverity Build Tool
         run: |
           curl \

src/webui/CMakeLists.txt

@@ -34,6 +34,48 @@ add_library(qbt_webui STATIC
     webui.cpp
 )
 
+# Build TypeScript files before processing webui.qrc
+find_program(NPM_EXECUTABLE npm)
+if(NOT NPM_EXECUTABLE)
+    message(FATAL_ERROR "npm is required to build the WebUI. Please install Node.js and npm.")
+endif()
+
+message(STATUS "Found npm: ${NPM_EXECUTABLE}")
+
+# Find all TypeScript source files
+file(GLOB_RECURSE WEBUI_TS_FILES
+    "${CMAKE_CURRENT_SOURCE_DIR}/www/private/scripts/*.ts"
+)
+# Exclude .d.ts files from dependencies
+list(FILTER WEBUI_TS_FILES EXCLUDE REGEX ".*\\.d\\.ts$")
+
+# Generate list of output JS files
+set(WEBUI_JS_FILES)
+foreach(ts_file ${WEBUI_TS_FILES})
+    string(REPLACE ".ts" ".js" js_file ${ts_file})
+    list(APPEND WEBUI_JS_FILES ${js_file})
+endforeach()
+
+# Custom command to build TypeScript
+add_custom_command(
+    OUTPUT ${WEBUI_JS_FILES}
+    COMMAND ${NPM_EXECUTABLE} run build
+    DEPENDS ${WEBUI_TS_FILES}
+            ${CMAKE_CURRENT_SOURCE_DIR}/www/tsconfig.json
+            ${CMAKE_CURRENT_SOURCE_DIR}/www/package.json
+    WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}/www
+    COMMENT "Compiling TypeScript files to JavaScript"
+    VERBATIM
+)
+
+# Create a custom target for TypeScript compilation
+add_custom_target(qbt_webui_typescript
+    DEPENDS ${WEBUI_JS_FILES}
+)
+
+# Make sure TypeScript is built before the webui library
+add_dependencies(qbt_webui qbt_webui_typescript)
+
 target_sources(qbt_webui INTERFACE www/webui.qrc)
 
 target_link_libraries(qbt_webui PRIVATE qbt_base)

src/webui/www/.gitignore

@@ -3,3 +3,6 @@
 .stylelintcache
 node_modules
 package-lock.json
+
+# ts built files
+private/scripts/*.js

src/webui/www/dprint.json

@@ -0,0 +1,36 @@
+{
+  "indentWidth": 4,
+  "useTabs": false,
+  "newLineKind": "lf",
+  "lineWidth": 1000,
+  "typescript": {
+    "bracePosition": "sameLine",
+    "singleBodyPosition": "nextLine",
+    "nextControlFlowPosition": "maintain",
+    "useBraces": "maintain",
+    "operatorPosition": "maintain",
+    "binaryExpression.operatorPosition": "nextLine",
+    "memberExpression.linePerExpression": false,
+    "binaryExpression.linePerExpression": false,
+    "trailingCommas": "onlyMultiLine",
+    "quoteStyle": "preferDouble",
+    "quoteProps": "asNeeded",
+    "semiColons": "always",
+    "arguments.preferSingleLine": true,
+    "conditionalExpression.preferSingleLine": true,
+    "parameters.preferSingleLine": true,
+    "parentheses.preferSingleLine": true,
+    "preferHanging": false,
+    "arguments.preferHanging": "never",
+    "arguments.trailingCommas": "never",
+    "forOfStatement.preferHanging": false,
+    "forStatement.preferHanging": false,
+    "ifStatement.preferHanging": false
+  },
+  "excludes": [
+    "**/node_modules"
+  ],
+  "plugins": [
+    "https://plugins.dprint.dev/typescript-0.95.11.wasm"
+  ]
+}

src/webui/www/eslint.config.mjs

@@ -4,6 +4,8 @@ import Js from "@eslint/js";
 import PluginQbtWebUI from "eslint-plugin-qbt-webui";
 import PreferArrowFunctions from "eslint-plugin-prefer-arrow-functions";
 import Stylistic from "@stylistic/eslint-plugin";
+import TypescriptEslint from "@typescript-eslint/eslint-plugin";
+import TypescriptParser from "@typescript-eslint/parser";
 import Unicorn from "eslint-plugin-unicorn";
 
 import * as RegexpPlugin from "eslint-plugin-regexp";
@@ -16,10 +18,11 @@ export default [
         files: [
             "**/*.html",
             "**/*.js",
-            "**/*.mjs"
+            "**/*.mjs",
+            "**/*.ts"
         ],
         languageOptions: {
-            ecmaVersion: 2022,
+            ecmaVersion: 2023,
             globals: {
                 ...Globals.browser
             }
@@ -76,5 +79,18 @@ export default [
             "Unicorn/prefer-number-properties": "error",
             "Unicorn/switch-case-braces": ["error", "avoid"]
         }
+    },
+    // TypeScript files - use same rules but with TypeScript parser
+    {
+        files: ["**/*.ts"],
+        languageOptions: {
+            parser: TypescriptParser,
+            parserOptions: {
+                project: "./tsconfig.json"
+            }
+        },
+        plugins: {
+            "@typescript-eslint": TypescriptEslint
+        }
     }
 ];

src/webui/www/package.json

@@ -6,12 +6,17 @@
     "url": "https://github.com/qbittorrent/qBittorrent.git"
   },
   "scripts": {
-    "format": "js-beautify -r *.mjs private/*.html private/scripts/*.js private/views/*.html public/*.html public/scripts/*.js test/*/*.js && prettier --write **.css",
-    "lint": "eslint --cache *.mjs private/*.html private/scripts/*.js private/views/*.html public/*.html public/scripts/*.js test/*/*.js && stylelint --cache **/*.css && html-validate private public",
+    "build": "tsc",
+    "build:watch": "tsc --watch",
+    "format": "js-beautify -r *.mjs private/*.html private/views/*.html public/*.html public/scripts/*.js test/*/*.js && dprint fmt private/scripts/*.ts && prettier --write **.css",
+    "lint": "eslint --cache *.mjs private/*.html private/scripts/*.ts private/views/*.html public/*.html public/scripts/*.js test/*/*.js && stylelint --cache **/*.css && html-validate private public",
     "test": "vitest run --dom"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "*",
+    "@typescript-eslint/eslint-plugin": "*",
+    "@typescript-eslint/parser": "*",
+    "dprint": "^0.50.1",
     "eslint": "*",
     "eslint-plugin-html": "*",
     "eslint-plugin-prefer-arrow-functions": "*",
@@ -25,6 +30,7 @@
     "stylelint": "*",
     "stylelint-config-standard": "*",
     "stylelint-order": "*",
+    "typescript": "^5.0.0",
     "vitest": "*"
   }
 }