Watch assets for hot reloading

Author: elanalynn

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

@@ -844,4 +844,159 @@ describe('file-watcher events', () => {
       expect(watchedPaths[1]).toEqual(watchedPaths[0])
     })
   })
+
+  describe('new file directory containment fallback', () => {
+    test('new file under an existing extension dir triggers file_created with the correct extensionHandle', async () => {
+      // Given: extension started with no files in assets/ — the new path is not in the snapshot
+      const ext = await testUIExtension({
+        type: 'ui_extension',
+        handle: 'asset_ext',
+        directory: '/extensions/asset_ext',
+      })
+      const newFilePath = '/extensions/asset_ext/assets/dog.jpg'
+      // At start(), no files are known. After the new file is added, watchedFiles() reflects it
+      // (representing the live globSync result picking up the new file on disk).
+      let watchedFilesResult: string[] = []
+      vi.spyOn(ext, 'watchedFiles').mockImplementation(() => watchedFilesResult)
+
+      const testApp = testAppLinked({
+        allExtensions: [ext],
+        directory: '/',
+        configPath: '/shopify.app.toml',
+        configuration: {
+          ...DEFAULT_CONFIG,
+          extension_directories: ['/extensions'],
+        } as any,
+      })
+
+      let eventHandler: any
+      const mockWatcher = {
+        on: vi.fn((event: string, listener: any) => {
+          if (event === 'all') eventHandler = listener
+          return mockWatcher
+        }),
+        close: vi.fn().mockResolvedValue(undefined),
+      }
+      vi.spyOn(chokidar, 'watch').mockReturnValue(mockWatcher as any)
+      vi.mocked(fileExistsSync).mockReturnValue(false)
+
+      const fileWatcher = new FileWatcher(testApp, outputOptions, 50)
+      const onChange = vi.fn()
+      fileWatcher.onChange(onChange)
+      await fileWatcher.start()
+      await flushPromises()
+
+      // Now simulate the new file being on disk and chokidar firing `add`
+      watchedFilesResult = [newFilePath]
+      await eventHandler('add', newFilePath, undefined)
+      await sleep(0.15)
+
+      // Then
+      await vi.waitFor(
+        () => {
+          expect(onChange).toHaveBeenCalled()
+          const calls = onChange.mock.calls
+          const actualEvents = calls.find((call) => call[0].length > 0)?.[0]
+          expect(actualEvents).toBeDefined()
+          expect(actualEvents).toHaveLength(1)
+          expect(actualEvents[0].type).toBe('file_created')
+          expect(actualEvents[0].path).toBe(normalizePath(newFilePath))
+          expect(actualEvents[0].extensionHandle).toBe('asset_ext')
+          expect(actualEvents[0].extensionPath).toBe(normalizePath('/extensions/asset_ext'))
+        },
+        {timeout: 1000, interval: 50},
+      )
+    })
+
+    test('new file outside any extension directory is still ignored', async () => {
+      // Given
+      const ext = await testUIExtension({
+        type: 'ui_extension',
+        handle: 'asset_ext',
+        directory: '/extensions/asset_ext',
+      })
+      vi.spyOn(ext, 'watchedFiles').mockReturnValue([])
+
+      const testApp = testAppLinked({
+        allExtensions: [ext],
+        directory: '/',
+        configPath: '/shopify.app.toml',
+        configuration: {
+          ...DEFAULT_CONFIG,
+          extension_directories: ['/extensions'],
+        } as any,
+      })
+
+      let eventHandler: any
+      const mockWatcher = {
+        on: vi.fn((event: string, listener: any) => {
+          if (event === 'all') eventHandler = listener
+          return mockWatcher
+        }),
+        close: vi.fn().mockResolvedValue(undefined),
+      }
+      vi.spyOn(chokidar, 'watch').mockReturnValue(mockWatcher as any)
+      vi.mocked(fileExistsSync).mockReturnValue(false)
+
+      const fileWatcher = new FileWatcher(testApp, outputOptions, 50)
+      const onChange = vi.fn()
+      fileWatcher.onChange(onChange)
+      await fileWatcher.start()
+      await flushPromises()
+
+      // When: a new file is added outside any extension directory
+      await eventHandler('add', '/some/unrelated/dir/foo.txt', undefined)
+      await sleep(0.15)
+
+      // Then: no event should be emitted
+      const hasNonEmptyCall = onChange.mock.calls.some((call) => call[0].length > 0)
+      expect(hasNonEmptyCall).toBe(false)
+    })
+
+    test('files under an extension dir but excluded by watchedFiles patterns remain filtered', async () => {
+      // Given: the extension's live watchedFiles() never includes the new path
+      // (representing a path excluded by devSessionWatchConfig.ignore or .gitignore).
+      const ext = await testUIExtension({
+        type: 'ui_extension',
+        handle: 'asset_ext',
+        directory: '/extensions/asset_ext',
+      })
+      vi.spyOn(ext, 'watchedFiles').mockReturnValue([])
+
+      const testApp = testAppLinked({
+        allExtensions: [ext],
+        directory: '/',
+        configPath: '/shopify.app.toml',
+        configuration: {
+          ...DEFAULT_CONFIG,
+          extension_directories: ['/extensions'],
+        } as any,
+      })
+
+      let eventHandler: any
+      const mockWatcher = {
+        on: vi.fn((event: string, listener: any) => {
+          if (event === 'all') eventHandler = listener
+          return mockWatcher
+        }),
+        close: vi.fn().mockResolvedValue(undefined),
+      }
+      vi.spyOn(chokidar, 'watch').mockReturnValue(mockWatcher as any)
+      vi.mocked(fileExistsSync).mockReturnValue(false)
+
+      const fileWatcher = new FileWatcher(testApp, outputOptions, 50)
+      const onChange = vi.fn()
+      fileWatcher.onChange(onChange)
+      await fileWatcher.start()
+      await flushPromises()
+
+      // When: a new file under the extension dir but not in watchedFiles() is added
+      await eventHandler('add', '/extensions/asset_ext/dist/built.js', undefined)
+      await sleep(0.15)
+
+      // Then: shouldIgnoreEvent must still drop it
+      const hasNonEmptyCall = onChange.mock.calls.some((call) => call[0].length > 0)
+      expect(hasNonEmptyCall).toBe(false)
+    })
+  })
 })

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

@@ -255,9 +255,29 @@ export class FileWatcher {
       const isUnknownExtension = affectedHandles === undefined || affectedHandles.size === 0
 
       if (isUnknownExtension && !isExtensionToml && !isConfigAppPath) {
-        // Ignore an event if it's not part of an existing extension
-        // Except if it is a toml file (either app config or extension config)
-        outputDebug(`🌀: File ${path} is not watched by any extension`, this.options.stdout)
+        // Path isn't in the snapshot — but it may still belong to an extension
+        // whose directory contains it (e.g. a newly-created file). Attribute by
+        // directory containment so chokidar `add` events for new files in
+        // extension dirs aren't silently dropped. The downstream
+        // `shouldIgnoreEvent` filter still consults each extension's live
+        // watchedFiles() patterns and gitignore, so excluded files are filtered.
+        const owningExtension = this.app.realExtensions.find((ext) => {
+          const extDir = normalizePath(ext.directory)
+          return normalizedPath === extDir || normalizedPath.startsWith(`${extDir}/`)
+        })
+        if (!owningExtension) {
+          outputDebug(`🌀: File ${path} is not watched by any extension`, this.options.stdout)
+          return
+        }
+        this.handleEventForExtension(
+          event,
+          path,
+          normalizePath(owningExtension.directory),
+          startTime,
+          false,
+          owningExtension.handle,
+        )
+        this.debouncedEmit()
         return
       }