build: downgrade web deps (#4644)

revert to older transmission-web build dependencies
to make it easier to build on stock older systems, e.g.
Ubuntu 20.04 which ships with Node 10.

code_style.sh

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

web/README.md

@@ -0,0 +1,9 @@
+# Notes
+
+- Node.js and npm are only needed for building.
+  The result is a static file, `transmission-app.js`, which can be
+  served from an Transmission session, e.g. transmission-daemon.
+
+- package.json's `devDependencies` are *intentionally* old to make
+  building on older stock systems possible, e.g. Ubuntu 20.04 which
+  ships with Node.js 10. Please don't bump deps without asking first.

web/package.json

@@ -5,7 +5,7 @@
   "license": "MIT",
   "scripts": {
     "dev": "WEBPACK_MODE=development webpack serve --config webpack.config.js",
-    "build": "webpack --config webpack.config.js",
+    "build": "webpack --config webpack.config.js --no-stats",
     "css": "sass --no-source-map assets/css/",
     "css:map": "sass assets/css/",
     "lint": "run-p --silent lint:eslint lint:stylelint lint:prettier",
@@ -17,34 +17,38 @@
     "lint:stylelint": "stylelint assets/css/*scss",
     "lint:stylelint:fix": "stylelint --fix assets/css/*scss"
   },
+  "engines": {
+    "node": ">= 10.19.0"
+  },
   "devDependencies": {
-    "@babel/core": "^7.20.12",
+    "@babel/core": "~7.20.12",
-    "@babel/eslint-parser": "^7.19.1",
+    "@babel/eslint-parser": "~7.19.1",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-class-properties": "~7.18.6",
-    "@primer/stylelint-config": "^12.7.0",
+    "@primer/css": "17.4.0",
-    "css-loader": "^6.7.3",
+    "css-loader": "~5.2.7",
-    "css-minimizer-webpack-plugin": "^4.2.2",
+    "css-minimizer-webpack-plugin": "~2.0.0",
-    "eslint": "^8.32.0",
+    "eslint": "~7.32.0",
-    "eslint-plugin-sonarjs": "^0.18.0",
+    "eslint-plugin-sonarjs": "~0.10.0",
-    "eslint-plugin-unicorn": "^45.0.2",
+    "eslint-plugin-unicorn": "~31.0.0",
-    "file-loader": "^6.2.0",
+    "file-loader": "~6.2.0",
-    "mini-css-extract-plugin": "^2.7.2",
+    "mini-css-extract-plugin": "~1.5.1",
-    "npm-run-all": "^4.1.5",
+    "npm-run-all": "~4.1.5",
-    "prettier": "^2.8.3",
+    "prettier": "~2.8.3",
-    "sass": "^1.57.1",
+    "sass": "~1.33.0",
-    "sass-loader": "^13.2.0",
+    "sass-loader": "~10.2.0",
-    "style-loader": "^3.3.1",
+    "style-loader": "~2.0.0",
-    "stylelint": "^14.16.1",
+    "stylelint": "~13.13.1",
-    "stylelint-config-prettier": "^9.0.4",
+    "stylelint-config-prettier": "~8.0.1",
-    "stylelint-config-sass-guidelines": "^9.0.1",
+    "stylelint-config-primer": "~10.0.1",
-    "stylelint-config-standard": "^29.0.0",
+    "stylelint-config-sass-guidelines": "~8.0.0",
-    "terser-webpack-plugin": "^5.3.6",
+    "stylelint-config-standard": "~22.0.0",
-    "webpack": "^5.75.0",
+    "terser-webpack-plugin": "~5.3.6",
-    "webpack-bundle-analyzer": "^4.7.0",
+    "webpack": "~5.75.0",
-    "webpack-cli": "^4.10.0",
+    "webpack-bundle-analyzer": "~4.7.0",
-    "webpack-dev-server": "^4.11.1"
+    "webpack-cli": "~4.7.2",
+    "webpack-dev-server": "~3.10.3"
   },
   "dependencies": {
-    "lodash.isequal": "^4.5.0"
+    "lodash.isequal": "~4.5.0"
   }
 }

web/src/prefs.js

@@ -62,7 +62,6 @@ export class Prefs extends EventTarget {
   static _setCookie(key, value) {
     const date = new Date();
     date.setFullYear(date.getFullYear() + 1);
-    // eslint-disable-next-line unicorn/no-document-cookie
     document.cookie = `${key}=${value}; SameSite=Strict; expires=${date.toGMTString()}`;
   }
 

web/src/utils.js

@@ -41,6 +41,18 @@ export const Utils = {
   },
 };
 
+function toggleClass(buttons, button, pages, page, callback) {
+  for (const element of buttons.children) {
+    element.classList.toggle('selected', element === button);
+  }
+  for (const element of pages.children) {
+    element.classList.toggle('hidden', element !== page);
+  }
+  if (callback) {
+    callback(page);
+  }
+}
+
 export function createTextualTabsContainer(id, tabs, callback) {
   const root = document.createElement('div');
   root.id = id;
@@ -67,17 +79,9 @@ export function createTextualTabsContainer(id, tabs, callback) {
     page.classList.add('hidden', 'tabs-page');
     pages.append(page);
 
-    button.addEventListener('click', () => {
+    button.addEventListener('click', () =>
-      for (const element of buttons.children) {
+      toggleClass(buttons, button, pages, page, callback)
-        element.classList.toggle('selected', element === button);
+    );
-      }
-      for (const element of pages.children) {
-        element.classList.toggle('hidden', element !== page);
-      }
-      if (callback) {
-        callback(page);
-      }
-    });
   }
 
   button_array[0].classList.add('selected');
@@ -114,17 +118,9 @@ export function createTabsContainer(id, tabs, callback) {
     page.classList.add('hidden', 'tabs-page');
     pages.append(page);
 
-    button.addEventListener('click', () => {
+    button.addEventListener('click', () =>
-      for (const element of buttons.children) {
+      toggleClass(buttons, button, pages, page, callback)
-        element.classList.toggle('selected', element === button);
+    );
-      }
-      for (const element of pages.children) {
-        element.classList.toggle('hidden', element !== page);
-      }
-      if (callback) {
-        callback(page);
-      }
-    });
   }
 
   button_array[0].classList.add('selected');

web/stylelint.config.js

@@ -5,8 +5,8 @@ module.exports = {
     "stylelint-config-prettier"
   ],
   "plugins":  [
-    "@primer/stylelint-config/plugins/no-undefined-vars",
+    "stylelint-config-primer/plugins/no-undefined-vars",
-    "@primer/stylelint-config/plugins/no-unused-vars"
+    "stylelint-config-primer/plugins/no-unused-vars"
   ],
   "rules": {
     "block-no-empty": true,

web/webpack.config.js

@@ -28,8 +28,7 @@ const config = {
         use: ['style-loader', 'css-loader'],
       },
       {
-        include: /(assets)\/(img)/,
+        test: /\.(png|svg)/,
-        test: /\.(jpe?g|png|gif|svg|webp)$/,
         type: 'asset/inline',
       },
     ],