add-directories-to-watched-files

Author: melissaluu

packages/app/src/cli/models/extensions/extension-instance.ts

@@ -51,6 +51,7 @@ export class ExtensionInstance<TConfiguration extends BaseConfigType = BaseConfi
   specification: ExtensionSpecification
   uid: string
   private cachedImportPaths?: string[]
+  private readonly additionalWatchedPaths = new Set<string>()
 
   get graphQLType() {
     return (this.specification.graphQLType ?? this.specification.identifier).toUpperCase()
@@ -460,9 +461,23 @@ export class ExtensionInstance<TConfiguration extends BaseConfigType = BaseConfi
       watchedFiles.push(...importedFiles)
     }
 
+    watchedFiles.push(...this.additionalWatchedPaths)
+
     return [...new Set(watchedFiles.map((file) => normalizePath(file)))]
   }
 
+  addWatchedPath(absolutePath: string): void {
+    this.additionalWatchedPaths.add(normalizePath(absolutePath))
+  }
+
+  getWatchedPaths(): ReadonlySet<string> {
+    return this.additionalWatchedPaths
+  }
+
+  clearWatchedPaths(): void {
+    this.additionalWatchedPaths.clear()
+  }
+
   /**
    * Rescans imports for this extension and updates the cached import paths
    * Returns true if the imports changed

packages/app/src/cli/services/build/steps/include-assets-step.ts

@@ -151,7 +151,12 @@ export async function executeIncludeAssetsStep(
       usedBasenames,
       preserveFilePaths: entry.preserveFilePaths,
     })
-    result.pathMap.forEach((val, key) => aggregatedPathMap.set(key, val))
+    result.pathMap.forEach((val, key) => {
+      aggregatedPathMap.set(key, val)
+      if (Array.isArray(val)) {
+        extension.addWatchedPath(joinPath(extension.directory, key))
+      }
+    })
     configKeyCount += result.filesCopied
   }
 

packages/app/src/cli/services/dev/app-events/app-event-watcher.ts

@@ -139,7 +139,13 @@ export class AppEventWatcher extends EventEmitter {
           const buildableEvents = appEvent.extensionEvents.filter((extEvent) => extEvent.type !== EventType.Deleted)
 
           // Build the created/updated extensions and update the extension events with the build result
+          const watchedPathsBefore = new Set(buildableEvents.flatMap((ev) => [...ev.extension.getWatchedPaths()]))
           await this.buildExtensions(buildableEvents)
+          const watchedPathsAfter = new Set(buildableEvents.flatMap((ev) => [...ev.extension.getWatchedPaths()]))
+          const watchedPathsChanged =
+            watchedPathsBefore.size !== watchedPathsAfter.size ||
+            [...watchedPathsAfter].some((watchedPath) => !watchedPathsBefore.has(watchedPath))
+          if (watchedPathsChanged) await this.fileWatcher?.start()
 
           // Generate the extension types after building the extensions so new imports are included
           // Skip if the app was reloaded, as generateExtensionTypes was already called during reload

packages/app/src/cli/services/dev/app-events/file-watcher.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-case-declarations */
 import {AppLinkedInterface} from '../../../models/app/app.js'
 import {configurationFileNames} from '../../../constants.js'
-import {dirname, joinPath, normalizePath, relativePath} from '@shopify/cli-kit/node/path'
+import {basename, dirname, joinPath, normalizePath, relativePath} from '@shopify/cli-kit/node/path'
 import {FSWatcher} from 'chokidar'
 import {outputDebug} from '@shopify/cli-kit/node/output'
 import {AbortSignal} from '@shopify/cli-kit/node/abort'
@@ -59,7 +59,7 @@ export class FileWatcher {
   private watcher?: FSWatcher
   private readonly debouncedEmit: () => void
   private readonly ignored: {[key: string]: ignore.Ignore | undefined} = {}
-  // Map of file paths to the extension handles that watch them
+  // Map of watched paths (files and directories) to the extension handles that own them
   private readonly extensionWatchedFiles = new Map<string, Set<string>>()
 
   constructor(
@@ -159,18 +159,34 @@ export class FileWatcher {
     for (const {extension, watchedFiles} of extensionResults) {
       for (const file of watchedFiles) {
         const normalizedPath = normalizePath(file)
-        allFiles.add(normalizedPath)
 
-        // Track which extension handles watch this file
+        // Track which extension handles watch this path
         const handlesSet = this.extensionWatchedFiles.get(normalizedPath) ?? new Set()
         handlesSet.add(extension.handle)
         this.extensionWatchedFiles.set(normalizedPath, handlesSet)
+
+        // Only pass files to chokidar — directories are already covered by
+        // extension directory watchers
+        if (basename(normalizedPath).includes('.')) {
+          allFiles.add(normalizedPath)
+        }
       }
     }
 
     return Array.from(allFiles)
   }
 
+  private getExtensionHandlesForFilePath(normalizedPath: string): Set<string> | undefined {
+    const handles = this.extensionWatchedFiles.get(normalizedPath)
+    if (handles) return handles
+    for (const [watchedPath, pathHandles] of this.extensionWatchedFiles) {
+      if (normalizedPath.startsWith(`${watchedPath}/`)) {
+        return pathHandles
+      }
+    }
+    return undefined
+  }
+
   /**
    * Emits the accumulated events and resets the current events list.
    * It also logs the number of events emitted and their paths for debugging purposes.
@@ -251,7 +267,7 @@ export class FileWatcher {
     if (isConfigAppPath) {
       this.handleEventForExtension(event, path, this.app.directory, startTime, false)
     } else {
-      const affectedHandles = this.extensionWatchedFiles.get(normalizedPath)
+      const affectedHandles = this.getExtensionHandlesForFilePath(normalizedPath)
       const isUnknownExtension = affectedHandles === undefined || affectedHandles.size === 0
 
       if (isUnknownExtension && !isExtensionToml && !isConfigAppPath) {