From 30f5a52d968f8f1d78da09521a920a4166bfa77d Mon Sep 17 00:00:00 2001
From: Colum Ferry <cferry09@gmail.com>
Date: Fri, 28 Feb 2025 11:07:34 +0000
Subject: [PATCH] fix(vite): copy assets plugin not copying files in watch mode
 #30141 (#30208)

## Current Behavior
Copy assets plugin for Vite is not copying files in watch mode when
those files are changed.

This is due to the path being incorrect after calculation.
There is also no indication to the user that the copy completed at all.

## Expected Behavior
Fix path calculation to allow copy to occur correctly

Output the relative dest of the file after copy completed.

## Related Issue(s)

Fixes #30141
---
 packages/js/package.json                            |  1 +
 packages/js/src/utils/assets/copy-assets-handler.ts | 10 ++++++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/js/package.json b/packages/js/package.json
index 95c87a19e5..b417ced8be 100644
--- a/packages/js/package.json
+++ b/packages/js/package.json
@@ -55,6 +55,7 @@
     "npm-package-arg": "11.0.1",
     "npm-run-path": "^4.0.1",
     "ora": "5.3.0",
+    "picocolors": "^1.1.0",
     "picomatch": "4.0.2",
     "semver": "^7.5.3",
     "source-map-support": "0.5.19",
diff --git a/packages/js/src/utils/assets/copy-assets-handler.ts b/packages/js/src/utils/assets/copy-assets-handler.ts
index 4846d83a02..6f874f056a 100644
--- a/packages/js/src/utils/assets/copy-assets-handler.ts
+++ b/packages/js/src/utils/assets/copy-assets-handler.ts
@@ -12,8 +12,9 @@ import * as path from 'node:path';
 import ignore from 'ignore';
 import { globSync } from 'tinyglobby';
 import { AssetGlob } from './assets';
-import { logger } from '@nx/devkit';
+import { logger, workspaceRoot } from '@nx/devkit';
 import { ChangedFile, daemonClient } from 'nx/src/daemon/client/client';
+import { dim } from 'picocolors';
 
 export type FileEventType = 'create' | 'update' | 'delete';
 
@@ -52,6 +53,9 @@ export const defaultFileEventHandler = (events: FileEvent[]) => {
     } else {
       logger.error(`Unknown file event: ${event.type}`);
     }
+    const eventDir = path.dirname(event.src);
+    const relativeDest = path.relative(eventDir, event.dest);
+    logger.log(`\n${dim(relativeDest)}`);
   });
 };
 
@@ -166,7 +170,9 @@ export class CopyAssetsHandler {
   async processWatchEvents(events: ChangedFile[]): Promise<void> {
     const fileEvents: FileEvent[] = [];
     for (const event of events) {
-      const pathFromRoot = path.relative(this.rootDir, event.path);
+      const pathFromRoot = event.path.startsWith(this.rootDir)
+        ? path.relative(this.rootDir, event.path)
+        : event.path;
       for (const ag of this.assetGlobs) {
         if (
           picomatch(ag.pattern)(pathFromRoot) &&