fix: out-of-tree build (#4641)

- in cmake, add transmission-web build target

- in cmake, test for `npm` if we're building transmission-web

- add npm to CI install deps; build transmission-web as needed

.github/workflows/actions.yml

@@ -70,6 +70,8 @@ jobs:
     runs-on: ubuntu-22.04
     needs: [ what-to-make ]
     if: ${{ needs.what-to-make.outputs.test-style == 'true' }}
+    env:
+      NODE_PATH: /usr/lib/nodejs:/usr/share/nodejs
     steps:
       - name: Show Configuration
         run: |
@@ -85,7 +87,7 @@ jobs:
           set -ex
           wget -O - https://apt.llvm.org/llvm-snapshot.gpg.key | sudo apt-key add -
           sudo add-apt-repository "deb http://apt.llvm.org/jammy/ llvm-toolchain-jammy-15 main"
-          sudo apt-get install -y clang-format-15 npm yarn
+          sudo apt-get install -y clang-format-15 npm
       - name: Check for style diffs
         id: check-for-diffs
         working-directory: .
@@ -114,6 +116,8 @@ jobs:
     runs-on: ubuntu-22.04
     needs: [ what-to-make ]
     if: ${{ needs.what-to-make.outputs.make-tests == 'true' }}
+    env:
+      NODE_PATH: /usr/lib/nodejs:/usr/share/nodejs
     steps:
       - name: Show Configuration
         run: |
@@ -137,7 +141,8 @@ jobs:
             libnatpmp-dev \
             libpsl-dev \
             libssl-dev \
-            ninja-build
+            ninja-build \
+            npm
       - name: Get Source
         uses: actions/checkout@v3
         with:
@@ -180,7 +185,7 @@ jobs:
           echo '${{ toJSON(runner) }}'
           sw_vers
       - name: Get Dependencies
-        run: brew install cmake gettext libdeflate libevent libnatpmp libpsl@0.21.1 miniupnpc ninja
+        run: brew install cmake gettext libdeflate libevent libnatpmp libpsl miniupnpc ninja node
       - name: Get Dependencies (GTK)
         if: ${{ needs.what-to-make.outputs.make-gtk == 'true' }}
         run: brew install gtkmm3 libjpeg
@@ -209,7 +214,7 @@ jobs:
             -DENABLE_QT=${{ (needs.what-to-make.outputs.make-qt == 'true') && 'ON' || 'OFF' }} \
             -DENABLE_TESTS=OFF \
             -DENABLE_UTILS=${{ (needs.what-to-make.outputs.make-utils == 'true') && 'ON' || 'OFF' }} \
-            -DENABLE_WEB=OFF \
+            -DENABLE_WEB=${{ (needs.what-to-make.outputs.make-web == 'true') && 'ON' || 'OFF' }} \
             -DENABLE_WERROR=ON \
             -DRUN_CLANG_TIDY=OFF
       - name: Make
@@ -255,6 +260,7 @@ jobs:
             linux-headers \
             miniupnpc-dev \
             ninja \
+            npm \
             pkgconfig \
             xz
       - name: Get Dependencies (GTK)
@@ -284,7 +290,7 @@ jobs:
             -DENABLE_QT=${{ (needs.what-to-make.outputs.make-qt == 'true') && 'ON' || 'OFF' }} \
             -DENABLE_TESTS=OFF \
             -DENABLE_UTILS=${{ (needs.what-to-make.outputs.make-utils == 'true') && 'ON' || 'OFF' }} \
-            -DENABLE_WEB=OFF \
+            -DENABLE_WEB=${{ (needs.what-to-make.outputs.make-web == 'true') && 'ON' || 'OFF' }} \
             -DENABLE_WERROR=ON \
             -DRUN_CLANG_TIDY=OFF
       - name: Make
@@ -322,7 +328,8 @@ jobs:
 
           choco install `
             jom `
-            nasm
+            nasm `
+            nodejs
           choco uninstall `
             openssl.light
           (Join-Path $Env:ProgramFiles NASM) | Out-File $Env:GITHUB_PATH -Append
@@ -376,7 +383,7 @@ jobs:
             -DENABLE_QT=${{ (needs.what-to-make.outputs.make-dist == 'true' || needs.what-to-make.outputs.make-qt == 'true') && 'ON' || 'OFF' }} `
             -DENABLE_TESTS=ON `
             -DENABLE_UTILS=ON `
-            -DENABLE_WEB=OFF `
+            -DENABLE_WEB=${{ (needs.what-to-make.outputs.make-web == 'true') && 'ON' || 'OFF' }} `
             -DENABLE_WERROR=ON `
             -DRUN_CLANG_TIDY=OFF
       - name: Make
@@ -451,7 +458,7 @@ jobs:
           echo '${{ toJSON(runner) }}'
           sw_vers
       - name: Get Dependencies
-        run: brew install cmake gettext libdeflate libevent libnatpmp libpsl@0.21.1 miniupnpc ninja
+        run: brew install cmake gettext libdeflate libevent libnatpmp libpsl miniupnpc ninja node
       - name: Get Dependencies (GTK)
         if: ${{ needs.what-to-make.outputs.make-gtk == 'true' }}
         run: brew install gtkmm3 libjpeg
@@ -481,7 +488,7 @@ jobs:
             -DENABLE_QT=${{ (needs.what-to-make.outputs.make-qt == 'true') && 'ON' || 'OFF' }} \
             -DENABLE_TESTS=${{ (needs.what-to-make.outputs.make-tests == 'true') && 'ON' || 'OFF' }} \
             -DENABLE_UTILS=${{ (needs.what-to-make.outputs.make-utils == 'true') && 'ON' || 'OFF' }} \
-            -DENABLE_WEB=OFF \
+            -DENABLE_WEB=${{ (needs.what-to-make.outputs.make-web == 'true') && 'ON' || 'OFF' }} \
             -DENABLE_WERROR=ON \
             -DRUN_CLANG_TIDY=OFF
       - name: Make
@@ -502,6 +509,8 @@ jobs:
     needs: [ make-source-tarball, what-to-make ]
     if: ${{ needs.what-to-make.outputs.make-cli == 'true' || needs.what-to-make.outputs.make-daemon == 'true' || needs.what-to-make.outputs.make-gtk == 'true' || needs.what-to-make.outputs.make-qt == 'true' || needs.what-to-make.outputs.make-tests == 'true' || needs.what-to-make.outputs.make-utils == 'true' }}
     runs-on: ubuntu-22.04
+    env:
+      NODE_PATH: /usr/lib/nodejs:/usr/share/nodejs
     container:
       image: debian:11-slim
     steps:
@@ -528,6 +537,7 @@ jobs:
             libpsl-dev \
             libssl-dev \
             ninja-build \
+            npm \
             pkg-config \
             xz-utils
       - name: Get Dependencies (GTK)
@@ -557,7 +567,7 @@ jobs:
             -DENABLE_QT=${{ (needs.what-to-make.outputs.make-qt == 'true') && 'ON' || 'OFF' }} \
             -DENABLE_TESTS=${{ (needs.what-to-make.outputs.make-tests == 'true') && 'ON' || 'OFF' }} \
             -DENABLE_UTILS=${{ (needs.what-to-make.outputs.make-utils == 'true') && 'ON' || 'OFF' }} \
-            -DENABLE_WEB=OFF \
+            -DENABLE_WEB=${{ (needs.what-to-make.outputs.make-web == 'true') && 'ON' || 'OFF' }} \
             -DENABLE_WERROR=ON \
             -DRUN_CLANG_TIDY=OFF
       - name: Build
@@ -576,6 +586,8 @@ jobs:
     needs: [ make-source-tarball, what-to-make ]
     if: ${{ needs.what-to-make.outputs.make-cli == 'true' || needs.what-to-make.outputs.make-daemon == 'true' || needs.what-to-make.outputs.make-gtk == 'true' || needs.what-to-make.outputs.make-qt == 'true' || needs.what-to-make.outputs.make-tests == 'true' || needs.what-to-make.outputs.make-utils == 'true' }}
     runs-on: ubuntu-22.04
+    env:
+      NODE_PATH: /usr/lib/nodejs:/usr/share/nodejs
     container:
       image: fedora:36
     steps:
@@ -600,6 +612,7 @@ jobs:
             libpsl-devel \
             miniupnpc-devel \
             ninja-build \
+            npm \
             openssl-devel \
             pkgconf-pkg-config \
             xz
@@ -630,7 +643,7 @@ jobs:
             -DENABLE_QT=${{ (needs.what-to-make.outputs.make-qt == 'true') && 'ON' || 'OFF' }} \
             -DENABLE_TESTS=${{ (needs.what-to-make.outputs.make-tests == 'true') && 'ON' || 'OFF' }} \
             -DENABLE_UTILS=${{ (needs.what-to-make.outputs.make-utils == 'true') && 'ON' || 'OFF' }} \
-            -DENABLE_WEB=OFF \
+            -DENABLE_WEB=${{ (needs.what-to-make.outputs.make-web == 'true') && 'ON' || 'OFF' }} \
             -DENABLE_WERROR=ON \
             -DRUN_CLANG_TIDY=OFF
       - name: Build

CMakeLists.txt

@@ -45,7 +45,7 @@ option(ENABLE_DAEMON "Build daemon" ON)
 tr_auto_option(ENABLE_GTK "Build GTK client" AUTO)
 tr_auto_option(ENABLE_QT "Build Qt client" AUTO)
 tr_auto_option(ENABLE_MAC "Build Mac client" AUTO)
-option(ENABLE_WEB "Build Web client" OFF)
+tr_auto_option(ENABLE_WEB "Build Web client" AUTO)
 option(ENABLE_UTILS "Build utils (create, edit, show)" ON)
 option(ENABLE_CLI "Build command-line client" OFF)
 option(ENABLE_TESTS "Build unit tests" ON)
@@ -724,6 +724,22 @@ if(ENABLE_GTK AND ENABLE_NLS)
     add_subdirectory(po)
 endif()
 
+if("${ENABLE_WEB}" STREQUAL "AUTO")
+    message(STATUS "searching for npm")
+    find_program(NPM npm)
+    message(STATUS "searching for npm - ${NPM}")
+    if ("${NPM}" STREQUAL "NPM-NOTFOUND")
+        set(ENABLE_WEB OFF)
+    else()
+        set(ENABLE_WEB ON)
+    endif()
+endif()
+if ("${ENABLE_WEB}" STREQUAL "ON")
+    message(STATUS "searching for npm")
+    find_program(NPM npm REQUIRED)
+    message(STATUS "searching for npm - ${NPM}")
+endif()
+
 foreach(P cli daemon gtk mac qt utils web)
     string(TOUPPER "${P}" P_ID)
     if(ENABLE_${P_ID})

web/CMakeLists.txt

@@ -1,4 +1,4 @@
-set(TRANSMISSION_WEB_SOURCES
+set(WEB_SOURCES
     src/about-dialog.js
     src/action-manager.js
     src/alert-dialog.js
@@ -6,6 +6,7 @@ set(TRANSMISSION_WEB_SOURCES
     src/file-row.js
     src/formatter.js
     src/inspector.js
+    src/labels-dialog.js
     src/main.js
     src/move-dialog.js
     src/notifications.js
@@ -21,40 +22,68 @@ set(TRANSMISSION_WEB_SOURCES
     src/torrent.js
     src/torrent-row.js
     src/transmission.js
-    src/utils.js
+    src/utils.js)
+
+set(WEB_STYLES
     assets/css/transmission-app.scss)
 
-set(TRANSMISSION_WEB_IMAGES
+set(WEB_IMAGES
     assets/img/box.svg
-    assets/img/film.svg
-    assets/img/modern-tortoise-blue.png
-    assets/img/modern-tortoise.png
     assets/img/chevron-down.svg
     assets/img/chevron-up.svg
+    assets/img/file-text.svg
+    assets/img/film.svg
+    assets/img/folder.svg
     assets/img/horizontal-rule.svg
+    assets/img/image.svg
     assets/img/lock-fill.svg
     assets/img/logo.png
-    assets/img/image.svg
     assets/img/magnet.svg
+    assets/img/modern-tortoise-blue.png
+    assets/img/modern-tortoise.png
     assets/img/music.svg
-    assets/img/file-text.svg
     assets/img/package.svg
-    assets/img/folder.svg
     assets/img/pause-circle-active.svg
     assets/img/pause-circle-idle.svg
     assets/img/play-circle-active.svg
     assets/img/play-circle-idle.svg
+    assets/img/README.md
     assets/img/router.svg
     assets/img/type.svg)
 
-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}/package-lock.json" "${CMAKE_CURRENT_BINARY_DIR}/package-lock.json"
-    WORKING_DIRECTORY "${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 ${TRANSMISSION_WEB_IMAGES}
-    SOURCES ${TRANSMISSION_WEB_SOURCES})
+add_custom_command(
+    OUTPUT
+        "${CMAKE_CURRENT_BINARY_DIR}/public_html/transmission-app.js"
+        "${CMAKE_CURRENT_BINARY_DIR}/public_html/transmission-app.js.map"
+        "${CMAKE_CURRENT_BINARY_DIR}/public_html/transmission-app.js.LICENSE.txt"
+    WORKING_DIRECTORY
+        "${CMAKE_CURRENT_BINARY_DIR}"
+    COMMAND "${CMAKE_COMMAND}" -E copy
+        "${CMAKE_CURRENT_SOURCE_DIR}/babel.config.js"
+        "${CMAKE_CURRENT_SOURCE_DIR}/package-lock.json"
+        "${CMAKE_CURRENT_SOURCE_DIR}/package.json"
+        "${CMAKE_CURRENT_SOURCE_DIR}/prettier.config.js"
+        "${CMAKE_CURRENT_SOURCE_DIR}/stylelint.config.js"
+        "${CMAKE_CURRENT_SOURCE_DIR}/webpack.config.js"
+        "${CMAKE_CURRENT_BINARY_DIR}"
+    COMMAND "${CMAKE_COMMAND}" -E copy_directory
+        "${CMAKE_CURRENT_SOURCE_DIR}/assets" "assets"
+    COMMAND "${CMAKE_COMMAND}" -E copy_directory
+        "${CMAKE_CURRENT_SOURCE_DIR}/public_html" "public_html"
+    COMMAND "${CMAKE_COMMAND}" -E copy_directory
+        "${CMAKE_CURRENT_SOURCE_DIR}/src" "src"
+    COMMAND "${NPM}" ci --no-audit --no-fund --no-progress
+    COMMAND "${NPM}" run --silent build
+    DEPENDS
+        ${WEB_SOURCES}
+        ${WEB_STYLES}
+        ${WEB_IMAGES})
+
+add_custom_target("${TR_NAME}-web"
+    ALL
+    DEPENDS
+        "${CMAKE_CURRENT_BINARY_DIR}/public_html/transmission-app.js"
+        "${CMAKE_CURRENT_BINARY_DIR}/public_html/transmission-app.js.map"
+        "${CMAKE_CURRENT_BINARY_DIR}/public_html/transmission-app.js.LICENSE.txt"
+    SOURCES
+        ${WEB_SOURCES})

web/src/transmission.js

@@ -61,7 +61,7 @@ export class Transmission extends EventTarget {
     );
 
     // listen to actions
-    // TODO: consider adding a mutator listener here to pick up dynamic additions
+    // TODO: consider adding a mutator listener here to see dynamic additions
     for (const element of document.querySelectorAll(`button[data-action]`)) {
       const { action } = element.dataset;
       setEnabled(element, this.action_manager.isEnabled(action));