feat: slightly better watch mode

[elibosley]

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.

[coderabbitai]

Walkthrough

This update modifies build and watch scripts across multiple packages, introduces a new Bash watcher script, adjusts Docker Compose volume mounts, and ensures necessary directories exist before Docker operations. It also adds a prebuild script in the web package and updates compression logic and directory cleaning in the API build process.

Changes

Files/Paths	Change Summary
api/package.json, package.json, web/package.json, plugin/package.json	Updated build/watch scripts: added environment variable to API watcher, enabled parallel execution in root, switched plugin watcher to shell script, and added a prebuild script in web package.
api/scripts/build.ts	Made tar compression conditional on watch mode, and added logic to clean the release directory before copying files.
plugin/scripts/build-watcher.sh	Introduced a new Bash script to watch source files and trigger builds with nodemon, including custom watch/ignore patterns and a delay before build.
plugin/docker-compose.yml	Changed volume mount from pack to release directory and added a clarifying comment.
plugin/scripts/dc.sh	Ensured a required directory exists before Docker operations to prevent volume mount errors.

Sequence Diagram(s)

sequenceDiagram
    participant Developer
    participant BuildWatcher (plugin/scripts/build-watcher.sh)
    participant Nodemon
    participant BuildScript

    Developer->>BuildWatcher: Start build watcher
    BuildWatcher->>Nodemon: Monitor files for changes
    Nodemon-->>BuildWatcher: File change detected
    BuildWatcher->>BuildWatcher: Wait 30 seconds
    BuildWatcher->>BuildScript: Run pnpm run build

Loading

Possibly related PRs

• refactor(api): vendor node_modules instead of pnpm store #1346: Refactors build.ts to vendor node_modules instead of using the pnpm store, closely related to the current changes in build and packaging logic involving node_modules.

Suggested reviewers

• pujitm
• mdatelle

Poem

Scripts now watch with eagle eyes,
Docker mounts where logic lies.
Compression shifts with watchful glee,
Clean slates for all the world to see.
Bash and nodemon join the dance—
Build flows onward, given the chance!
🚀

✨ Finishing Touches

• 📝 Generate Docstrings

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (4)

api/package.json (1)

24-24: Enable watch mode via WATCH_MODE=true
Prepending WATCH_MODE=true to the watch script allows build.ts to switch to faster compression in watch mode.
Consider using cross-env if Windows support is needed to ensure environment variables are set correctly across platforms.

plugin/scripts/dc.sh (1)

28-34: Ensure Nuxt components directory exists for Docker mount
Creating the directory prevents Docker from erroring when mounting. To improve robustness, consider:

• Adding set -euo pipefail at the top to fail fast on errors.
• Computing NUXT_COMPONENTS_DIR relative to the script location ($(dirname "$0")) to avoid issues when invoked from a different working directory.

plugin/scripts/build-watcher.sh (2)

1-11: Consider reducing the watch delay for faster feedback.

The script logic for watching files and triggering builds is solid, but a 30-second delay (line 10) may be too long for efficient development. Most watch processes use delays of 1-5 seconds to provide faster feedback.

- --delay 30s \
+ --delay 5s \

---

1-11: Add comments explaining watch patterns and exclusions.

Adding comments to explain the rationale behind the specific watch patterns and exclusions would improve maintainability for future developers.

 #!/bin/bash
+# Watch script for rebuilding the plugin when source files change
+# Ignores test files and specific configuration files that shouldn't trigger rebuilds
 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' 

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9ce2fee and 5220788.

📒 Files selected for processing (8)

• api/package.json (1 hunks)
• api/scripts/build.ts (1 hunks)
• package.json (1 hunks)
• plugin/docker-compose.yml (1 hunks)
• plugin/package.json (1 hunks)
• plugin/scripts/build-watcher.sh (1 hunks)
• plugin/scripts/dc.sh (1 hunks)
• web/package.json (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms (2)

• GitHub Check: Test API
• GitHub Check: Cloudflare Pages

🔇 Additional comments (4)

web/package.json (1)

17-17: Add prebuild:watch script for watch-mode
This ensures @unraid/ui is built before running build:watch, aligning the Web package with the new watch-mode workflow.

plugin/docker-compose.yml (1)

15-15: Update volume mount to use release directory
Mounting ../api/deploy/release/ aligns with the updated API build output and prevents watcher conflicts with node_modules. Comment is clear and accurate.

plugin/package.json (1)

24-24: Improved maintainability by extracting watcher logic to a separate script.

Moving the complex nodemon command to a dedicated script file makes the package.json cleaner and the watcher configuration easier to maintain.

api/scripts/build.ts (1)

52-53: Good optimization for watch mode with conditional compression.

Using a faster compression level during watch mode will significantly improve the development experience by reducing build times.

[coderabbitai]

⚠️ Potential issue

Remove leading whitespace in build:watch command
The script value starts with a space (" pnpm -r --parallel build:watch"), which may lead to an invalid command or unexpected behavior. Remove the leading space:

- "build:watch": " pnpm -r --parallel build:watch",
+ "build:watch": "pnpm -r --parallel build:watch",

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	"build:watch": " pnpm -r --parallel build:watch",
	"build:watch": "pnpm -r --parallel build:watch",

🤖 Prompt for AI Agents

In package.json at line 7, remove the leading whitespace before the command in
the "build:watch" script so it starts directly with "pnpm -r --parallel
build:watch" without any preceding spaces to avoid invalid command execution.

[coderabbitai]

💡 Verification agent

🧩 Analysis chain

Improved reliability with explicit directory cleaning.

Explicitly cleaning the release directory before copying files ensures a clean slate for each build, preventing potential issues with stale files.

Consider adding error handling for the case when the release directory can't be cleaned or when the copy operation fails:

---

🏁 Script executed:

#!/bin/bash
# Check if the release directory exists and if files are being copied correctly
ls -la ../release/ 
echo "Checking if directories are properly set up and accessible"

Length of output: 206

---

Ensure release directory exists and handle errors in build script

Add a step to create the ../release directory if it doesn’t exist before cleaning and copying, and wrap the operations in a try/catch to surface failures:

// api/scripts/build.ts (around lines 59–63)
try {
  await $`mkdir -p ../release`;
  await $`rm -rf ../release/*`;
  await $`cp -r ./* ../release/`;
} catch (error) {
  console.error("Release setup failed:", error);
  process.exit(1);
}

• Creates the target directory to prevent No such file or directory errors
• Cleans out stale files explicitly
• Logs and exits on any failure in setup or file copy

🤖 Prompt for AI Agents

In api/scripts/build.ts around lines 59 to 63, the script currently removes and
copies files to the release directory without ensuring the directory exists or
handling errors. To fix this, first add a command to create the ../release
directory if it doesn't exist, then wrap the mkdir, rm, and cp commands in a
try/catch block. In the catch block, log the error with a clear message and exit
the process with a failure code to handle any issues during directory setup or
file copying.

[github-actions]

This plugin has been deployed to Cloudflare R2 and is available for testing.
Download it at this URL:

https://preview.dl.unraid.net/unraid-api/tag/PR1398/dynamix.unraid.net.plg