Merge pull request #6078 from Shopify/watch-imports

Watch all imported files on app dev

Author: gonzaloriestra

packages/app/src/cli/models/app/app.ts

@@ -293,6 +293,7 @@ export interface AppInterface<
   dotenv?: DotEnvFile
   allExtensions: ExtensionInstance[]
   realExtensions: ExtensionInstance[]
+  nonConfigExtensions: ExtensionInstance[]
   draftableExtensions: ExtensionInstance[]
   errors?: AppErrors
   hiddenConfig: AppHiddenConfig
@@ -396,10 +397,14 @@ export class App<
   }
 
   get allExtensions() {
-    if (this.includeConfigOnDeploy === false) return this.realExtensions.filter((ext) => !ext.isAppConfigExtension)
+    if (this.includeConfigOnDeploy === false) return this.nonConfigExtensions
     return this.realExtensions
   }
 
+  get nonConfigExtensions() {
+    return this.realExtensions.filter((ext) => !ext.isAppConfigExtension)
+  }
+
   get draftableExtensions() {
     return this.realExtensions.filter(
       (ext) => ext.isUUIDStrategyExtension || ext.specification.identifier === AppAccessSpecIdentifier,

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

@@ -21,10 +21,13 @@ import {describe, expect, test, vi} from 'vitest'
 import {inTemporaryDirectory, readFile, mkdir, writeFile, fileExistsSync} from '@shopify/cli-kit/node/fs'
 import {slugify} from '@shopify/cli-kit/common/string'
 import {hashString, nonRandomUUID} from '@shopify/cli-kit/node/crypto'
+import {extractImportPathsRecursively} from '@shopify/cli-kit/node/import-extractor'
 import {Writable} from 'stream'
 
 const developerPlatformClient: DeveloperPlatformClient = testDeveloperPlatformClient()
 
+vi.mock('@shopify/cli-kit/node/import-extractor')
+
 function functionConfiguration(): FunctionConfigType {
   return {
     name: 'foo',
@@ -37,90 +40,6 @@ function functionConfiguration(): FunctionConfigType {
   }
 }
 
-describe('watchPaths', async () => {
-  test('returns an array for a single path', async () => {
-    const config = functionConfiguration()
-    config.build = {
-      watch: 'src/single-path.foo',
-      wasm_opt: true,
-    }
-    const extensionInstance = await testFunctionExtension({
-      config,
-      dir: 'foo',
-    })
-
-    const got = extensionInstance.watchBuildPaths
-
-    expect(got).toEqual([joinPath('foo', 'src', 'single-path.foo'), joinPath('foo', '**', '!(.)*.graphql')])
-  })
-
-  test('returns default paths for javascript', async () => {
-    const config = functionConfiguration()
-    config.build = {
-      wasm_opt: true,
-    }
-    const extensionInstance = await testFunctionExtension({
-      config,
-      entryPath: 'src/index.js',
-      dir: 'foo',
-    })
-
-    const got = extensionInstance.watchBuildPaths
-
-    expect(got).toEqual([joinPath('foo', 'src', '**', '*.{js,ts}'), joinPath('foo', '**', '!(.)*.graphql')])
-  })
-
-  test('returns js and ts paths for esbuild extensions', async () => {
-    const extensionInstance = await testUIExtension({directory: 'foo'})
-
-    const got = extensionInstance.watchBuildPaths
-
-    expect(got).toEqual([joinPath('foo', 'src', '**', '*.{ts,tsx,js,jsx}')])
-  })
-
-  test('return empty array for non-function non-esbuild extensions', async () => {
-    const extensionInstance = await testTaxCalculationExtension('foo')
-
-    const got = extensionInstance.watchBuildPaths
-
-    expect(got).toEqual([])
-  })
-
-  test('returns configured paths and input query', async () => {
-    const config = functionConfiguration()
-    config.build = {
-      watch: ['src/**/*.rs', 'src/**/*.foo'],
-      wasm_opt: true,
-    }
-    const extensionInstance = await testFunctionExtension({
-      config,
-      dir: 'foo',
-    })
-
-    const got = extensionInstance.watchBuildPaths
-
-    expect(got).toEqual([
-      joinPath('foo', 'src/**/*.rs'),
-      joinPath('foo', 'src/**/*.foo'),
-      joinPath('foo', '**', '!(.)*.graphql'),
-    ])
-  })
-
-  test('returns null if not javascript and not configured', async () => {
-    const config = functionConfiguration()
-    config.build = {
-      wasm_opt: true,
-    }
-    const extensionInstance = await testFunctionExtension({
-      config,
-    })
-
-    const got = extensionInstance.watchBuildPaths
-
-    expect(got).toBeNull()
-  })
-})
-
 describe('keepBuiltSourcemapsLocally', async () => {
   test('moves the appropriate source map files to the expected directory for sourcemap generating extensions', async () => {
     await inTemporaryDirectory(async (bundleDirectory: string) => {
@@ -607,3 +526,135 @@ describe('draftMessages', async () => {
     })
   })
 })
+
+describe('watchedFiles', async () => {
+  test('returns files based on devSessionWatchPaths when defined', async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      // Given
+      const config = functionConfiguration()
+      config.build = {
+        watch: 'src/**/*.js',
+        wasm_opt: true,
+      }
+      const extensionInstance = await testFunctionExtension({
+        config,
+        dir: tmpDir,
+      })
+
+      // Create some test files
+      const srcDir = joinPath(tmpDir, 'src')
+      await mkdir(srcDir)
+      await writeFile(joinPath(srcDir, 'index.js'), 'console.log("test")')
+      await writeFile(joinPath(srcDir, 'helper.js'), 'export const helper = () => {}')
+
+      // Mock import extraction to return only the starting files (no external imports)
+      const indexFile = joinPath(srcDir, 'index.js')
+      vi.mocked(extractImportPathsRecursively).mockImplementation((filePath) => [filePath])
+
+      // When
+      const watchedFiles = extensionInstance.watchedFiles()
+
+      // Then
+      expect(watchedFiles).toHaveLength(2)
+      expect(watchedFiles).toContain(joinPath(srcDir, 'index.js'))
+      expect(watchedFiles).toContain(joinPath(srcDir, 'helper.js'))
+
+      // Clean up
+      vi.mocked(extractImportPathsRecursively).mockReset()
+    })
+  })
+
+  test('returns all files when devSessionWatchPaths is undefined', async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      // Given
+      const extensionInstance = await testUIExtension({directory: tmpDir})
+
+      // Create some test files
+      const srcDir = joinPath(tmpDir, 'src')
+      await mkdir(srcDir)
+      await writeFile(joinPath(srcDir, 'index.ts'), 'console.log("test")')
+      await writeFile(joinPath(tmpDir, 'config.json'), '{}')
+
+      // Mock import extraction to return only the starting files (no external imports)
+      vi.mocked(extractImportPathsRecursively).mockImplementation((filePath) => [filePath])
+
+      // When
+      const watchedFiles = extensionInstance.watchedFiles()
+
+      // Then
+      expect(watchedFiles).toContain(joinPath(srcDir, 'index.ts'))
+      expect(watchedFiles).toContain(joinPath(tmpDir, 'config.json'))
+
+      // Clean up
+      vi.mocked(extractImportPathsRecursively).mockReset()
+    })
+  })
+
+  test('includes imported files from outside extension directory', async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      // Given
+      const extensionInstance = await testUIExtension({
+        directory: tmpDir,
+        entrySourceFilePath: joinPath(tmpDir, 'src', 'index.ts'),
+      })
+
+      // Create test file
+      const srcDir = joinPath(tmpDir, 'src')
+      await mkdir(srcDir)
+      await writeFile(joinPath(srcDir, 'index.ts'), 'import "../../../shared/utils"')
+
+      // Mock import extraction to return external import
+      const externalFile = joinPath(tmpDir, '..', '..', 'shared', 'utils.ts')
+      const entryFile = joinPath(srcDir, 'index.ts')
+      vi.mocked(extractImportPathsRecursively).mockReturnValue([entryFile, externalFile])
+
+      // When
+      const watchedFiles = extensionInstance.watchedFiles()
+
+      // Then
+      expect(watchedFiles).toContain(joinPath(srcDir, 'index.ts'))
+      expect(watchedFiles).toContain(externalFile)
+
+      // Clean up
+      vi.mocked(extractImportPathsRecursively).mockReset()
+    })
+  })
+})
+
+describe('rescanImports', async () => {
+  test('clears cached import paths and rescans', async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      // Given
+      const extensionInstance = await testUIExtension({
+        directory: tmpDir,
+        entrySourceFilePath: joinPath(tmpDir, 'src', 'index.ts'),
+      })
+
+      // Create test file
+      const srcDir = joinPath(tmpDir, 'src')
+      await mkdir(srcDir)
+      await writeFile(joinPath(srcDir, 'index.ts'), 'import "./local"')
+
+      // Reset mock to ensure clean state
+      vi.mocked(extractImportPathsRecursively).mockReset()
+
+      // First scan with one set of imports
+      vi.mocked(extractImportPathsRecursively).mockReturnValue(['./local'])
+      // This will populate cachedImportPaths
+      extensionInstance.watchedFiles()
+
+      // Update the mock to return different imports
+      vi.mocked(extractImportPathsRecursively).mockReturnValue(['./local', '../external'])
+
+      // When
+      const newImports = await extensionInstance.rescanImports()
+
+      // Then
+      expect(extractImportPathsRecursively).toHaveBeenCalledTimes(2)
+      // Note: we can't directly test the result since resolvePath would fail in test
+
+      // Clean up
+      vi.mocked(extractImportPathsRecursively).mockReset()
+    })
+  })
+})