build: build transmission-web with npm instead of yarn (#4637)

code_style.sh

@@ -77,12 +77,11 @@ fi
 
 # format JS
 cd "${root}/web" || exit 1
-yarn_args='--silent --no-progress --non-interactive'
+npm_lint_args="$([ -n "$fix" ] && echo 'lint:fix' || echo 'lint')"
-yarn_lint_args="$([ -n "$fix" ] && echo 'lint:fix' || echo 'lint')"
+if ! npm install &>/dev/null; then
-if ! yarn $yarn_args install; then
+  [ -n "$fix" ] || echo 'JS code could not be checked -- "npm install" failed'
-  [ -n "$fix" ] || echo 'JS code could not be checked -- "yarn install" failed'
   exitcode=1
-elif ! yarn $yarn_args $yarn_lint_args; then
+elif ! npm run $npm_lint_args &>/dev/null; then
   [ -n "$fix" ] || echo 'JS code needs formatting'
   exitcode=1
 fi

web/CMakeLists.txt

@@ -1,4 +1,4 @@
-set(TRWEB_SRCS
+set(TRANSMISSION_WEB_SOURCES
     src/about-dialog.js
     src/action-manager.js
     src/alert-dialog.js
@@ -24,7 +24,7 @@ set(TRWEB_SRCS
     src/utils.js
     assets/css/transmission-app.scss)
 
-set(TRWEB_IMGS
+set(TRANSMISSION_WEB_IMAGES
     assets/img/box.svg
     assets/img/film.svg
     assets/img/modern-tortoise-blue.png
@@ -47,13 +47,14 @@ set(TRWEB_IMGS
     assets/img/router.svg
     assets/img/type.svg)
 
-add_custom_target(trweb ALL
+add_custom_target(transmission-web ALL
     COMMAND ${CMAKE_COMMAND} -E copy "${CMAKE_CURRENT_SOURCE_DIR}/package.json" "${CMAKE_CURRENT_BINARY_DIR}/package.json"
-    COMMAND ${CMAKE_COMMAND} -E copy "${CMAKE_CURRENT_SOURCE_DIR}/yarn.lock" "${CMAKE_CURRENT_BINARY_DIR}/yarn.lock"
+    COMMAND ${CMAKE_COMMAND} -E copy "${CMAKE_CURRENT_SOURCE_DIR}/package-lock.json" "${CMAKE_CURRENT_BINARY_DIR}/package-lock.json"
-    COMMAND yarn install
+    WORKING_DIRECTORY "${CMAKE_CURRENT_SOURCE_DIR}"
-    COMMAND yarn webpack --config "${CMAKE_CURRENT_SOURCE_DIR}/webpack.config.js" --context "${CMAKE_CURRENT_SOURCE_DIR}"
+    COMMAND npm install
+    COMMAND npm run build -- --context "${CMAKE_CURRENT_SOURCE_DIR}"
     BYPRODUCTS
         public_html/transmission-app.js
         public_html/transmission-app.js.LICENSE.txt
-    DEPENDS ${TRWEB_IMGS}
+    DEPENDS ${TRANSMISSION_WEB_IMAGES}
-    SOURCES ${TRWEB_SRCS})
+    SOURCES ${TRANSMISSION_WEB_SOURCES})

web/package.json

@@ -18,28 +18,28 @@
     "lint:stylelint:fix": "stylelint --fix assets/css/*scss"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.6",
+    "@babel/core": "^7.20.12",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@primer/stylelint-config": "^12.7.0",
-    "css-loader": "^6.7.1",
+    "css-loader": "^6.7.3",
     "css-minimizer-webpack-plugin": "^4.2.2",
-    "eslint": "^8.26.0",
+    "eslint": "^8.32.0",
-    "eslint-plugin-sonarjs": "^0.16.0",
+    "eslint-plugin-sonarjs": "^0.18.0",
-    "eslint-plugin-unicorn": "^44.0.2",
+    "eslint-plugin-unicorn": "^45.0.2",
     "file-loader": "^6.2.0",
-    "mini-css-extract-plugin": "^2.6.1",
+    "mini-css-extract-plugin": "^2.7.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.3",
-    "sass": "^1.55.0",
+    "sass": "^1.57.1",
-    "sass-loader": "^13.1.0",
+    "sass-loader": "^13.2.0",
     "style-loader": "^3.3.1",
-    "stylelint": "^14.14.0",
+    "stylelint": "^14.16.1",
-    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-prettier": "^9.0.4",
     "stylelint-config-sass-guidelines": "^9.0.1",
     "stylelint-config-standard": "^29.0.0",
     "terser-webpack-plugin": "^5.3.6",
-    "webpack": "^5.74.0",
+    "webpack": "^5.75.0",
     "webpack-bundle-analyzer": "^4.7.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1"

web/src/inspector.js

@@ -300,16 +300,16 @@ export class Inspector extends EventTarget {
         (sizeWhenDone ? (sizeWhenDone - leftUntilDone) / sizeWhenDone : 1);
       string = fmt.percentString(d);
 
-      if (!unverified && !leftUntilDone) {
+      if (unverified) {
-        string = `${fmt.size(verified)} (100%)`;
+        string = `${fmt.size(verified)} of ${fmt.size(
-      } else if (!unverified) {
+          sizeWhenDone
+        )} (${string}%), ${fmt.size(unverified)} Unverified`;
+      } else if (leftUntilDone) {
         string = `${fmt.size(verified)} of ${fmt.size(
           sizeWhenDone
         )} (${string}%)`;
       } else {
-        string = `${fmt.size(verified)} of ${fmt.size(
+        string = `${fmt.size(verified)} (100%)`;
-          sizeWhenDone
-        )} (${string}%), ${fmt.size(unverified)} Unverified`;
       }
     }
     setTextContent(e.info.have, string);
@@ -374,9 +374,9 @@ export class Inspector extends EventTarget {
     } else {
       const get = (t) => t.getStartDate();
       const first = get(torrents[0]);
-      string = !torrents.every((t) => get(t) === first)
+      string = torrents.every((t) => get(t) === first)
-        ? mixed
+        ? fmt.timeInterval(now / 1000 - first)
-        : fmt.timeInterval(now / 1000 - first);
+        : mixed;
     }
     setTextContent(e.info.running_time, string);
 
@@ -433,9 +433,7 @@ export class Inspector extends EventTarget {
         (accumulator, t) => accumulator + t.getTotalSize(),
         0
       );
-      if (!size) {
+      if (size) {
-        string = 'None';
-      } else {
         const get = (t) => t.getPieceSize();
         const pieceCount = torrents.reduce(
           (accumulator, t) => accumulator + t.getPieceCount(),
@@ -446,6 +444,8 @@ export class Inspector extends EventTarget {
         string = torrents.every((t) => get(t) === pieceSize)
           ? `${fmt.size(size)} (${pieceString} pieces @ ${fmt.mem(pieceSize)})`
           : `${fmt.size(size)} (${pieceString} pieces)`;
+      } else {
+        string = 'None';
       }
     }
     setTextContent(e.info.size, string);

web/src/transmission.js

@@ -179,9 +179,9 @@ export class Transmission extends EventTarget {
           break;
         case 'toggle-compact-rows':
           this.prefs.display_mode =
-            this.prefs.display_mode !== Prefs.DisplayCompact
+            this.prefs.display_mode === Prefs.DisplayCompact
-              ? Prefs.DisplayCompact
+              ? Prefs.DisplayFull
-              : Prefs.DisplayFull;
+              : Prefs.DisplayCompact;
           break;
         case 'trash-selected-torrents':
           this._removeSelectedTorrents(true);
@@ -897,9 +897,9 @@ TODO: fix this when notifications get fixed
 
     // build the new html
     let string = '';
-    string += !this.filterTracker
+    string += this.filterTracker
-      ? '<option value="all" selected="selected">All</option>'
+      ? '<option value="all">All</option>'
-      : '<option value="all">All</option>';
+      : '<option value="all" selected="selected">All</option>';
     for (const sitename of sitenames) {
       string += `<option value="${sitename}"`;
       if (sitename === this.filterTracker) {
@@ -1049,10 +1049,10 @@ TODO: fix this when notifications get fixed
         const row = dirty_rows[di++];
         const e = row.getElement();
 
-        if (ci !== cmax) {
+        if (ci === cmax) {
-          list.insertBefore(e, clean_rows[ci].getElement());
-        } else {
           frag.append(e);
+        } else {
+          list.insertBefore(e, clean_rows[ci].getElement());
         }
 
         rows.push(row);