refactor: remove ESBuildContextManager from app-event-watcher

Co-authored-by: Claude Code <claude-code@anthropic.com>

Author: isaacroldan

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

@@ -1,6 +1,5 @@
-import {AppEvent, AppEventWatcher, EventType, ExtensionEvent} from './app-event-watcher.js'
+import {AppEventWatcher, EventType, ExtensionEvent} from './app-event-watcher.js'
 import {OutputContextOptions, WatcherEvent, FileWatcher} from './file-watcher.js'
-import {ESBuildContextManager} from './app-watcher-esbuild.js'
 import {
   testAppAccessConfigExtension,
   testAppConfigExtensions,
@@ -22,7 +21,6 @@ import {joinPath} from '@shopify/cli-kit/node/path'
 import {Writable} from 'stream'
 
 vi.mock('../../../models/app/loader.js')
-vi.mock('./app-watcher-esbuild.js')
 
 // Extensions 1 and 1B simulate extensions defined in the same directory (same toml)
 const extension1 = await testUIExtension({
@@ -360,9 +358,8 @@ describe('app-event-watcher', () => {
             configuration: testAppConfiguration,
           })
 
-          const mockManager = new MockESBuildContextManager()
           const mockFileWatcher = new MockFileWatcher(app, outputOptions, [fileWatchEvent])
-          const watcher = new AppEventWatcher(app, 'url', buildOutputPath, mockManager, mockFileWatcher)
+          const watcher = new AppEventWatcher(app, 'url', buildOutputPath, mockFileWatcher)
           const emitSpy = vi.spyOn(watcher, 'emit')
           await watcher.start({stdout, stderr, signal: abortController.signal})
 
@@ -433,9 +430,8 @@ describe('app-event-watcher', () => {
         })
         const generateTypesSpy = vi.spyOn(app, 'generateExtensionTypes')
 
-        const mockManager = new MockESBuildContextManager()
         const mockFileWatcher = new MockFileWatcher(app, outputOptions, [fileWatchEvent])
-        const watcher = new AppEventWatcher(app, 'url', buildOutputPath, mockManager, mockFileWatcher)
+        const watcher = new AppEventWatcher(app, 'url', buildOutputPath, mockFileWatcher)
         const emitSpy = vi.spyOn(watcher, 'emit')
 
         // When
@@ -468,9 +464,8 @@ describe('app-event-watcher', () => {
           configuration: testAppConfiguration,
         })
 
-        const mockManager = new MockESBuildContextManager()
         const mockFileWatcher = new MockFileWatcher(app, outputOptions, [fileWatchEvent])
-        const watcher = new AppEventWatcher(app, 'url', buildOutputPath, mockManager, mockFileWatcher)
+        const watcher = new AppEventWatcher(app, 'url', buildOutputPath, mockFileWatcher)
         const emitSpy = vi.spyOn(watcher, 'emit')
 
         // When
@@ -503,9 +498,8 @@ describe('app-event-watcher', () => {
           configuration: testAppConfiguration,
         })
 
-        const mockManager = new MockESBuildContextManager()
         const mockFileWatcher = new MockFileWatcher(app, outputOptions, [fileWatchEvent])
-        const watcher = new AppEventWatcher(app, 'url', buildOutputPath, mockManager, mockFileWatcher)
+        const watcher = new AppEventWatcher(app, 'url', buildOutputPath, mockFileWatcher)
         const emitSpy = vi.spyOn(watcher, 'emit')
 
         // When
@@ -535,9 +529,8 @@ describe('app-event-watcher', () => {
         })
         const generateTypesSpy = vi.spyOn(app, 'generateExtensionTypes')
 
-        const mockManager = new MockESBuildContextManager()
         const mockFileWatcher = new MockFileWatcher(app, outputOptions, [fileWatchEvent])
-        const watcher = new AppEventWatcher(app, 'url', buildOutputPath, mockManager, mockFileWatcher)
+        const watcher = new AppEventWatcher(app, 'url', buildOutputPath, mockFileWatcher)
         const emitSpy = vi.spyOn(watcher, 'emit')
 
         // When
@@ -571,19 +564,17 @@ describe('app-event-watcher', () => {
           ],
         }
 
-        const mockManager = new MockESBuildContextManager()
-        mockManager.rebuildContext = vi.fn().mockRejectedValueOnce(esbuildError)
-
         const buildOutputPath = joinPath(tmpDir, '.shopify', 'bundle')
         const app = testAppLinked({
           allExtensions: [extension1],
           configPath: 'shopify.app.custom.toml',
           configuration: testAppConfiguration,
         })
+        extension1.buildForBundle = vi.fn().mockRejectedValueOnce(esbuildError)
         const mockFileWatcher = new MockFileWatcher(app, outputOptions, [fileWatchEvent])
 
         // When
-        const watcher = new AppEventWatcher(app, 'url', buildOutputPath, mockManager, mockFileWatcher)
+        const watcher = new AppEventWatcher(app, 'url', buildOutputPath, mockFileWatcher)
         const emitSpy = vi.spyOn(watcher, 'emit')
         const stderr = {write: vi.fn()} as unknown as Writable
         const stdout = {write: vi.fn()} as unknown as Writable
@@ -627,9 +618,9 @@ describe('app-event-watcher', () => {
         })
 
         // When
-        const mockManager = new MockESBuildContextManager()
+
         const mockFileWatcher = new MockFileWatcher(app, outputOptions, [fileWatchEvent])
-        const watcher = new AppEventWatcher(app, 'url', buildOutputPath, mockManager, mockFileWatcher)
+        const watcher = new AppEventWatcher(app, 'url', buildOutputPath, mockFileWatcher)
         const emitSpy = vi.spyOn(watcher, 'emit')
         const stderr = {write: vi.fn()} as unknown as Writable
         const stdout = {write: vi.fn()} as unknown as Writable
@@ -661,13 +652,14 @@ describe('app-event-watcher', () => {
           configPath: 'shopify.app.custom.toml',
           configuration: testAppConfiguration,
         })
+
+        // Make rescanImports throw to simulate an uncaught error in the watcher pipeline
+        extension1.rescanImports = vi.fn().mockRejectedValueOnce(uncaughtError)
+
         const mockFileWatcher = new MockFileWatcher(app, outputOptions, [fileWatchEvent])
 
         // When
-        const mockManager = new MockESBuildContextManager()
-        mockManager.updateContexts = vi.fn().mockRejectedValueOnce(uncaughtError)
-
-        const watcher = new AppEventWatcher(app, 'url', buildOutputPath, mockManager, mockFileWatcher)
+        const watcher = new AppEventWatcher(app, 'url', buildOutputPath, mockFileWatcher)
         const emitSpy = vi.spyOn(watcher, 'emit')
         const stderr = {write: vi.fn()} as unknown as Writable
         const stdout = {write: vi.fn()} as unknown as Writable
@@ -684,26 +676,6 @@ describe('app-event-watcher', () => {
     })
   })
 })
-// Mock class for ESBuildContextManager
-// It handles the ESBuild contexts for the extensions that are being watched
-class MockESBuildContextManager extends ESBuildContextManager {
-  contexts = {
-    // The keys are the extension handles, the values are the ESBuild contexts mocked
-    uid1: [{rebuild: vi.fn(), watch: vi.fn(), serve: vi.fn(), cancel: vi.fn(), dispose: vi.fn()}],
-    uid1B: [{rebuild: vi.fn(), watch: vi.fn(), serve: vi.fn(), cancel: vi.fn(), dispose: vi.fn()}],
-    uid2: [{rebuild: vi.fn(), watch: vi.fn(), serve: vi.fn(), cancel: vi.fn(), dispose: vi.fn()}],
-    'test-ui-extension': [{rebuild: vi.fn(), watch: vi.fn(), serve: vi.fn(), cancel: vi.fn(), dispose: vi.fn()}],
-  }
-
-  constructor() {
-    super({dotEnvVariables: {}, url: 'url', outputPath: 'outputPath'})
-  }
-
-  async createContexts(extensions: ExtensionInstance[]) {}
-  async updateContexts(appEvent: AppEvent) {}
-  async deleteContexts(extensions: ExtensionInstance[]) {}
-}
-
 // Mock class for FileWatcher
 // Used to trigger mocked file system events immediately after the watcher is started.
 class MockFileWatcher extends FileWatcher {

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

@@ -1,11 +1,9 @@
 /* eslint-disable tsdoc/syntax */
 import {FileWatcher, OutputContextOptions} from './file-watcher.js'
-import {ESBuildContextManager} from './app-watcher-esbuild.js'
 import {handleWatcherEvents} from './app-event-watcher-handler.js'
 import {AppLinkedInterface} from '../../../models/app/app.js'
 import {ExtensionInstance} from '../../../models/extensions/extension-instance.js'
 import {ExtensionBuildOptions} from '../../build/extension.js'
-import {formatBundleSize} from '../../build/bundle-size.js'
 import {outputDebug} from '@shopify/cli-kit/node/output'
 import {AbortSignal} from '@shopify/cli-kit/node/abort'
 import {joinPath} from '@shopify/cli-kit/node/path'
@@ -95,7 +93,6 @@ export class AppEventWatcher extends EventEmitter {
   private app: AppLinkedInterface
   private options: OutputContextOptions
   private readonly appURL?: string
-  private readonly esbuildManager: ESBuildContextManager
   private started = false
   private ready = false
   private initialEvents: ExtensionEvent[] = []
@@ -105,7 +102,6 @@ export class AppEventWatcher extends EventEmitter {
     app: AppLinkedInterface,
     appURL?: string,
     buildOutputPath?: string,
-    esbuildManager?: ESBuildContextManager,
     fileWatcher?: FileWatcher,
   ) {
     super()
@@ -114,14 +110,6 @@ export class AppEventWatcher extends EventEmitter {
     this.buildOutputPath = buildOutputPath ?? joinPath(app.directory, '.shopify', 'dev-bundle')
     // Default options, to be overwritten by the start method
     this.options = {stdout: process.stdout, stderr: process.stderr, signal: new AbortSignal()}
-    this.esbuildManager =
-      esbuildManager ??
-      new ESBuildContextManager({
-        outputPath: this.buildOutputPath,
-        dotEnvVariables: this.app.dotenv?.variables ?? {},
-        url: this.appURL ?? '',
-        ...this.options,
-      })
     this.fileWatcher = fileWatcher
   }
 
@@ -130,15 +118,11 @@ export class AppEventWatcher extends EventEmitter {
     this.started = true
 
     this.options = options ?? this.options
-    this.esbuildManager.setAbortSignal(this.options.signal)
 
     // If there is a previous build folder, delete it
     if (await fileExists(this.buildOutputPath)) await rmdir(this.buildOutputPath, {force: true})
     await mkdir(this.buildOutputPath)
 
-    // Start the esbuild bundler for extensions that require it
-    await this.esbuildManager.createContexts(this.app.realExtensions.filter((ext) => ext.isESBuildExtension))
-
     // Initial build of all extensions
     if (buildExtensionsFirst) {
       this.initialEvents = this.app.realExtensions.map((ext) => ({type: EventType.Updated, extension: ext}))
@@ -154,8 +138,6 @@ export class AppEventWatcher extends EventEmitter {
 
           this.app = appEvent.app
           if (appEvent.appWasReloaded) this.fileWatcher?.updateApp(this.app)
-          await this.esbuildManager.updateContexts(appEvent)
-
           await this.rescanImports(appEvent)
 
           // Find affected created/updated extensions and build them
@@ -237,9 +219,7 @@ export class AppEventWatcher extends EventEmitter {
   }
 
   /**
-   * Builds all given extensions.
-   * ESBuild extensions will be built using their own ESBuild context, other extensions will be built using the default
-   * buildForBundle method.
+   * Builds all given extensions using the default buildForBundle method.
    */
   private async buildExtensions(extensionEvents: ExtensionEvent[]) {
     // Group events by extension to handle multiple events for the same extension
@@ -258,13 +238,7 @@ export class AppEventWatcher extends EventEmitter {
     const promises = groupedExtensionEvents.map(async ({extension: ext, events}) => {
       return useConcurrentOutputContext({outputPrefix: ext.handle, stripAnsi: false}, async () => {
         try {
-          if (this.esbuildManager.contexts?.[ext.uid]?.length) {
-            await this.esbuildManager.rebuildContext(ext)
-            const sizeInfo = await formatBundleSize(ext.outputPath)
-            this.options.stdout.write(`Build successful${sizeInfo}`)
-          } else {
-            await this.buildExtension(ext)
-          }
+          await this.buildExtension(ext)
           // Update all events for this extension with success result
           const buildResult = {status: 'ok' as const, uid: ext.uid}
           events.forEach((event) => {
@@ -309,7 +283,7 @@ export class AppEventWatcher extends EventEmitter {
   }
 
   /**
-   * Build a single non-esbuild extension using the default buildForBundle method.
+   * Build a single extension using the default buildForBundle method.
    * @param extension - The extension to build
    */
   private async buildExtension(extension: ExtensionInstance): Promise<void> {