Extract custom watch paths to specifications

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

Author: isaacroldan

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

@@ -1,6 +1,6 @@
 import {BaseConfigType, MAX_EXTENSION_HANDLE_LENGTH, MAX_UID_LENGTH} from './schemas.js'
 import {FunctionConfigType} from './specifications/function.js'
-import {ExtensionFeature, ExtensionSpecification} from './specification.js'
+import {DevSessionWatchConfig, ExtensionFeature, ExtensionSpecification} from './specification.js'
 import {SingleWebhookSubscriptionType} from './specifications/app_config_webhook_schemas/webhooks_schema.js'
 import {ExtensionBuildOptions, bundleFunctionExtension} from '../../services/build/extension.js'
 import {bundleThemeExtension} from '../../services/extensions/bundle.js'
@@ -277,20 +277,15 @@ export class ExtensionInstance<TConfiguration extends BaseConfigType = BaseConfi
     return [this.entrySourceFilePath]
   }
 
-  // Custom paths to be watched in a dev session
-  // Return undefiend if there aren't custom configured paths (everything is watched)
-  // If there are, include some default paths.
-  get devSessionCustomWatchPaths() {
-    const config = this.configuration as unknown as FunctionConfigType
-    if (!config.build || !config.build.watch) return undefined
-
-    const watchPaths = [config.build.watch].flat().map((path) => joinPath(this.directory, path))
-
-    watchPaths.push(joinPath(this.directory, 'locales', '**.json'))
-    watchPaths.push(joinPath(this.directory, '**', '!(.)*.graphql'))
-    watchPaths.push(joinPath(this.directory, '**.toml'))
+  // Custom watch configuration for dev sessions
+  // Return undefined to watch everything (default for 'extension' experience)
+  // Return a config with empty paths to watch nothing (default for 'configuration' experience)
+  get devSessionWatchConfig(): DevSessionWatchConfig | undefined {
+    if (this.specification.devSessionWatchConfig) {
+      return this.specification.devSessionWatchConfig(this)
+    }
 
-    return watchPaths
+    return this.specification.experience === 'configuration' ? {paths: []} : undefined
   }
 
   async watchConfigurationPaths() {
@@ -436,20 +431,31 @@ export class ExtensionInstance<TConfiguration extends BaseConfigType = BaseConfi
   watchedFiles(): string[] {
     const watchedFiles: string[] = []
 
-    // Add extension directory files based on devSessionCustomWatchPaths or all files
-    const patterns = this.devSessionCustomWatchPaths ?? ['**/*']
+    const defaultIgnore = [
+      '**/node_modules/**',
+      '**/.git/**',
+      '**/*.test.*',
+      '**/dist/**',
+      '**/*.swp',
+      '**/generated/**',
+      '**/.gitignore',
+    ]
+    const watchConfig = this.devSessionWatchConfig
+
+    const patterns = watchConfig?.paths ?? ['**/*']
+    const ignore = watchConfig?.ignore ?? defaultIgnore
     const files = patterns.flatMap((pattern) =>
       globSync(pattern, {
         cwd: this.directory,
         absolute: true,
         followSymbolicLinks: false,
-        ignore: ['**/node_modules/**', '**/.git/**', '**/dist/**', '**/*.swp', '**/generated/**'],
+        ignore,
       }),
     )
     watchedFiles.push(...files.flat())
 
-    // Add imported files from outside the extension directory unless custom watch paths are defined
-    if (!this.devSessionCustomWatchPaths) {
+    // Add imported files from outside the extension directory unless custom watch config is defined
+    if (!watchConfig) {
       const importedFiles = this.scanImports()
       watchedFiles.push(...importedFiles)
     }

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

@@ -136,6 +136,20 @@ export interface ExtensionSpecification<TConfiguration extends BaseConfigType =
    * Copy static assets from the extension directory to the output path
    */
   copyStaticAssets?: (configuration: TConfiguration, directory: string, outputPath: string) => Promise<void>
+
+  /**
+   * Custom watch configuration for dev sessions.
+   * Return a DevSessionWatchConfig with paths to watch and optionally paths to ignore,
+   * or undefined to watch all files in the extension directory.
+   */
+  devSessionWatchConfig?: (extension: ExtensionInstance<TConfiguration>) => DevSessionWatchConfig | undefined
+}
+
+export interface DevSessionWatchConfig {
+  /** Absolute paths or globs to watch */
+  paths: string[]
+  /** Additional glob patterns to ignore (on top of the default ignore list) */
+  ignore?: string[]
 }
 
 /**
@@ -294,6 +308,7 @@ export function createContractBasedModuleSpecification<TConfiguration extends Ba
     | 'clientSteps'
     | 'experience'
     | 'transformRemoteToLocal'
+    | 'devSessionWatchConfig'
   >,
 ) {
   return createExtensionSpecification({

packages/app/src/cli/models/extensions/specifications/admin.ts

@@ -1,8 +1,31 @@
-import {createContractBasedModuleSpecification} from '../specification.js'
+import {createExtensionSpecification} from '../specification.js'
+import {BaseSchemaWithoutHandle} from '../schemas.js'
+import {zod} from '@shopify/cli-kit/node/schema'
+import {joinPath} from '@shopify/cli-kit/node/path'
 
-const adminSpecificationSpec = createContractBasedModuleSpecification({
+const AdminSchema = BaseSchemaWithoutHandle.extend({
+  admin: zod
+    .object({
+      static_root: zod.string().optional(),
+    })
+    .optional(),
+})
+
+const adminSpecificationSpec = createExtensionSpecification({
   identifier: 'admin',
   uidStrategy: 'single',
+  experience: 'configuration',
+  schema: AdminSchema,
+  deployConfig: async (config, _) => {
+    return {admin: config.admin}
+  },
+  devSessionWatchConfig: (extension) => {
+    const staticRoot = extension.configuration.admin?.static_root
+    if (!staticRoot) return {paths: []}
+
+    const path = joinPath(extension.directory, staticRoot, '**/*')
+    return {paths: [path], ignore: []}
+  },
   transformRemoteToLocal: (remoteContent) => {
     return {
       admin: {

packages/app/src/cli/models/extensions/specifications/function.ts

@@ -90,6 +90,18 @@ const functionSpec = createExtensionSpecification({
   appModuleFeatures: (_) => ['function'],
   buildConfig: {mode: 'function'},
   getOutputRelativePath: (_extension: ExtensionInstance<FunctionConfigType>) => joinPath('dist', 'index.wasm'),
+  devSessionWatchConfig: (extension: ExtensionInstance<FunctionConfigType>) => {
+    const config = extension.configuration
+    if (!config.build || !config.build.watch) return undefined
+
+    const paths = [config.build.watch].flat().map((path) => joinPath(extension.directory, path))
+
+    paths.push(joinPath(extension.directory, 'locales', '**.json'))
+    paths.push(joinPath(extension.directory, '**', '!(.)*.graphql'))
+    paths.push(joinPath(extension.directory, '**.toml'))
+
+    return {paths}
+  },
   clientSteps: [
     {
       lifecycle: 'deploy',

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

@@ -118,15 +118,6 @@ export class FileWatcher {
     // Create new watcher
     const {default: chokidar} = await import('chokidar')
     this.watcher = chokidar.watch(watchPaths, {
-      ignored: [
-        '**/node_modules/**',
-        '**/.git/**',
-        '**/*.test.*',
-        '**/dist/**',
-        '**/*.swp',
-        '**/generated/**',
-        '**/.gitignore',
-      ],
       persistent: true,
       ignoreInitial: true,
     })