feat: slightly better watch mode (#1398)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Added a script to automatically prepare UI components before running
the build watch process in the web app.
- **Bug Fixes**
- Improved build and release processes to ensure directories are
properly cleaned and created, preventing potential errors during Docker
operations.
- **Chores**
- Updated build watch scripts for faster development feedback and more
efficient parallel execution.
- Refined Docker Compose configuration to use the correct release
directory for plugin builds.
- Introduced a new script to streamline and centralize file watching and
build triggering in the plugin system.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

api/package.json

@@ -21,7 +21,7 @@
         "// Build and Deploy": "",
         "build": "vite build --mode=production",
         "postbuild": "chmod +x dist/main.js && chmod +x dist/cli.js && node scripts/copy-plugins.js",
-        "build:watch": "nodemon --watch src --ext ts,js,json --exec 'tsx ./scripts/build.ts'",
+        "build:watch": "WATCH_MODE=true nodemon --watch src --ext ts,js,json --exec 'tsx ./scripts/build.ts'",
         "build:docker": "./scripts/dc.sh run --rm builder",
         "build:release": "tsx ./scripts/build.ts",
         "preunraid:deploy": "pnpm build",

api/scripts/build.ts

@@ -49,12 +49,19 @@ try {
 
     await writeFile('package.json', JSON.stringify(parsedPackageJson, null, 4));
 
-    await $`XZ_OPT=-5 tar -cJf packed-node-modules.tar.xz node_modules`;
+    const compressionLevel = process.env.WATCH_MODE ? '-1' : '-5';
+    await $`XZ_OPT=${compressionLevel} tar -cJf packed-node-modules.tar.xz node_modules`;
     // Create a subdirectory for the node modules archive
     await mkdir('../node-modules-archive', { recursive: true });
     await $`mv packed-node-modules.tar.xz ../node-modules-archive/`;
     await $`rm -rf node_modules`;
 
+    // Clean the release directory
+    await $`rm -rf ../release/*`;
+
+    // Copy other files to release directory
+    await $`cp -r ./* ../release/`;
+
     // chmod the cli
     await $`chmod +x ./dist/cli.js`;
     await $`chmod +x ./dist/main.js`;

package.json

@@ -4,7 +4,7 @@
   "version": "4.8.0",
   "scripts": {
     "build": "pnpm -r build",
-    "build:watch": "pnpm -r build:watch",
+    "build:watch": " pnpm -r --parallel build:watch",
     "dev": "pnpm -r dev",
     "unraid:deploy": "pnpm -r unraid:deploy",
     "test": "pnpm -r test",

plugin/docker-compose.yml

@@ -12,7 +12,7 @@ services:
       - ./scripts:/app/scripts
       - ../unraid-ui/dist-wc:/app/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/unraid-components/uui
       - ../web/.nuxt/nuxt-custom-elements/dist/unraid-components:/app/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/unraid-components/nuxt
-      - ../api/deploy/pack/:/app/source/dynamix.unraid.net/usr/local/unraid-api
+      - ../api/deploy/release/:/app/source/dynamix.unraid.net/usr/local/unraid-api # Use the release dir instead of pack to allow watcher to not try to build with node_modules
       - ../api/deploy/node-modules-archive:/app/node-modules-archive
     stdin_open: true # equivalent to -i
     tty: true        # equivalent to -t

plugin/package.json

@@ -21,7 +21,7 @@
     "build:txz": "tsx builder/build-txz.ts",
     "build:plugin": "tsx builder/build-plugin.ts",
     "build:validate": "npm run env:validate && npm run build",
-    "build:watcher": "nodemon --verbose --watch 'source/**/*' --watch 'plugins/dynamix.unraid.net.plg' --ext ts,js,plg,sh --ignore '*.test.ts' --ignore 'node_modules/**' --delay 5s --exec 'pnpm run build'",
+    "build:watcher": "./scripts/build-watcher.sh",
     "// Docker commands": "",
     "build:watch": "./scripts/dc.sh pnpm run build:watcher",
     "docker:build": "docker compose build",

plugin/scripts/build-watcher.sh

@@ -0,0 +1,11 @@
+#!/bin/bash
+nodemon --verbose \
+  --watch 'source/**/*' \
+  --watch 'plugins/dynamix.unraid.net.plg' \
+  --ext ts,js,plg,sh,xz,json \
+  --ignore '*.test.ts' \
+  --ignore 'node_modules/**' \
+  --ignore 'source/dynamix.unraid.net/doinst.sh' \
+  --ignore 'source/dynamix.unraid.net/usr/local/share/dynamix.unraid.net/config/vendor_archive.json' \
+  --delay 30s \
+  --exec 'pnpm run build' 

plugin/scripts/dc.sh

@@ -25,6 +25,14 @@ API_VERSION=$([[ -n "$IS_TAGGED" ]] && echo "$PACKAGE_LOCK_VERSION" || echo "${P
 # Define container name for easier management
 CONTAINER_NAME="plugin-builder"
 
+# Create the directory if it doesn't exist
+# This is to prevent errors when mounting volumes in docker compose
+NUXT_COMPONENTS_DIR="../web/.nuxt/nuxt-custom-elements/dist/unraid-components"
+if [ ! -d "$NUXT_COMPONENTS_DIR" ]; then
+  echo "Creating directory $NUXT_COMPONENTS_DIR for Docker volume mount..."
+  mkdir -p "$NUXT_COMPONENTS_DIR"
+fi
+
 # Stop any running plugin-builder container first
 echo "Stopping any running plugin-builder containers..."
 docker ps -q --filter "name=${CONTAINER_NAME}" | xargs -r docker stop

web/package.json

@@ -14,6 +14,7 @@
     "build:dev": "nuxi build --dotenv .env.staging && pnpm run manifest-ts && pnpm run deploy-to-unraid:dev",
     "build:webgui": "pnpm run type-check && nuxi build --dotenv .env.production && pnpm run manifest-ts && pnpm run copy-to-webgui-repo",
     "build": "NODE_ENV=production nuxi build --dotenv .env.production && pnpm run manifest-ts",
+    "prebuild:watch": "pnpm predev",
     "build:watch": "nuxi build --dotenv .env.production --watch && pnpm run manifest-ts",
     "generate": "nuxt generate",
     "manifest-ts": "node ./scripts/add-timestamp-webcomponent-manifest.js",