fix(builder): only listen for file changes for supported extensions (#5812)

packages/builder/src/builder.js

@@ -209,6 +209,10 @@ export default class Builder {
     }
   }
 
+  globPathWithExtensions(path) {
+    return `${path}/**/*.{${this.supportedExtensions.join(',')}}`
+  }
+
   async generateRoutesAndFiles() {
     consola.debug('Generating nuxt files')
 
@@ -229,7 +233,7 @@ export default class Builder {
     await this.resolveLoadingIndicator(templateContext)
 
     // Add vue-app template dir to watchers
-    this.options.build.watch.push(this.template.dir)
+    this.options.build.watch.push(this.globPathWithExtensions(this.template.dir))
 
     await this.compileTemplates(templateContext)
 
@@ -274,7 +278,7 @@ export default class Builder {
   }
 
   async resolveFiles(dir, cwd = this.options.srcDir) {
-    return this.ignore.filter(await glob(`${dir}/**/*.{${this.supportedExtensions.join(',')}}`, {
+    return this.ignore.filter(await glob(this.globPathWithExtensions(dir), {
       cwd,
       ignore: this.options.ignore
     }))
@@ -568,6 +572,7 @@ export default class Builder {
       watcher.on(event, listener)
     }
 
+    // TODO: due to fixes in chokidar this isnt used anymore and could be removed in Nuxt v3
     const { rewatchOnRawEvents } = this.options.watchers
     if (rewatchOnRawEvents && Array.isArray(rewatchOnRawEvents)) {
       watcher.on('raw', (_event) => {
@@ -592,26 +597,20 @@ export default class Builder {
   }
 
   watchClient() {
-    const src = this.options.srcDir
-    const rGlob = dir => ['*', '**/*'].map(glob => r(src, `${dir}/${glob}.{${this.supportedExtensions.join(',')}}`))
-
     let patterns = [
-      r(src, this.options.dir.layouts),
+      r(this.options.srcDir, this.options.dir.layouts),
-      r(src, this.options.dir.middleware),
+      r(this.options.srcDir, this.options.dir.middleware)
-      ...rGlob(this.options.dir.layouts)
     ]
+
     if (this.options.store) {
-      patterns.push(r(src, this.options.dir.store))
+      patterns.push(r(this.options.srcDir, this.options.dir.store))
     }
 
     if (this._nuxtPages && !this._defaultPage) {
-      patterns.push(
+      patterns.push(r(this.options.srcDir, this.options.dir.pages))
-        r(src, this.options.dir.pages),
-        ...rGlob(this.options.dir.pages)
-      )
     }
 
-    patterns = patterns.map(upath.normalizeSafe)
+    patterns = patterns.map((path, ...args) => upath.normalizeSafe(this.globPathWithExtensions(path), ...args))
 
     const refreshFiles = debounce(() => this.generateRoutesAndFiles(), 200)
 

packages/builder/test/builder.generate.test.js

@@ -76,7 +76,7 @@ describe('builder: builder generate', () => {
     ])
     expect(builder.resolveCustomTemplates).toBeCalledTimes(1)
     expect(builder.resolveLoadingIndicator).toBeCalledTimes(1)
-    expect(builder.options.build.watch).toEqual(['/var/nuxt/src/template'])
+    expect(builder.options.build.watch).toEqual(['/var/nuxt/src/template/**/*.{vue,js,ts,tsx}'])
     expect(builder.compileTemplates).toBeCalledTimes(1)
     expect(consola.success).toBeCalledTimes(1)
     expect(consola.success).toBeCalledWith('Nuxt files generated')

packages/builder/test/builder.watch.test.js

@@ -42,25 +42,24 @@ describe('builder: builder watch', () => {
 
     const patterns = [
       '/var/nuxt/src/layouts',
-      '/var/nuxt/src/middleware',
+      '/var/nuxt/src/middleware'
-      '/var/nuxt/src/layouts/*.{vue,js,ts,tsx}',
-      '/var/nuxt/src/layouts/**/*.{vue,js,ts,tsx}'
     ]
 
-    expect(r).toBeCalledTimes(4)
+    const globbedPatterns = [
-    expect(r).nthCalledWith(1, '/var/nuxt/src', '/var/nuxt/src/layouts')
+      '/var/nuxt/src/layouts/**/*.{vue,js,ts,tsx}',
-    expect(r).nthCalledWith(2, '/var/nuxt/src', '/var/nuxt/src/middleware')
+      '/var/nuxt/src/middleware/**/*.{vue,js,ts,tsx}'
-    expect(r).nthCalledWith(3, '/var/nuxt/src', '/var/nuxt/src/layouts/*.{vue,js,ts,tsx}')
+    ]
-    expect(r).nthCalledWith(4, '/var/nuxt/src', '/var/nuxt/src/layouts/**/*.{vue,js,ts,tsx}')
 
-    expect(upath.normalizeSafe).toBeCalledTimes(4)
+    expect(r).toBeCalledTimes(2)
-    expect(upath.normalizeSafe).nthCalledWith(1, '/var/nuxt/src/layouts', 0, patterns)
+    expect(r).nthCalledWith(1, '/var/nuxt/src', patterns[0])
-    expect(upath.normalizeSafe).nthCalledWith(2, '/var/nuxt/src/middleware', 1, patterns)
+    expect(r).nthCalledWith(2, '/var/nuxt/src', patterns[1])
-    expect(upath.normalizeSafe).nthCalledWith(3, '/var/nuxt/src/layouts/*.{vue,js,ts,tsx}', 2, patterns)
+
-    expect(upath.normalizeSafe).nthCalledWith(4, '/var/nuxt/src/layouts/**/*.{vue,js,ts,tsx}', 3, patterns)
+    expect(upath.normalizeSafe).toBeCalledTimes(2)
+    expect(upath.normalizeSafe).nthCalledWith(1, globbedPatterns[0], 0, patterns)
+    expect(upath.normalizeSafe).nthCalledWith(2, globbedPatterns[1], 1, patterns)
 
     expect(builder.createFileWatcher).toBeCalledTimes(1)
-    expect(builder.createFileWatcher).toBeCalledWith(patterns, ['add', 'unlink'], expect.any(Function), expect.any(Function))
+    expect(builder.createFileWatcher).toBeCalledWith(globbedPatterns, ['add', 'unlink'], expect.any(Function), expect.any(Function))
     expect(builder.assignWatcher).toBeCalledTimes(1)
   })
 
@@ -83,8 +82,8 @@ describe('builder: builder watch', () => {
 
     builder.watchClient()
 
-    expect(r).toBeCalledTimes(5)
+    expect(r).toBeCalledTimes(3)
-    expect(r).nthCalledWith(5, '/var/nuxt/src', '/var/nuxt/src/store')
+    expect(r).nthCalledWith(3, '/var/nuxt/src', '/var/nuxt/src/store')
   })
 
   test('should NOT watch pages files on client if _defaultPage=true', () => {
@@ -108,7 +107,7 @@ describe('builder: builder watch', () => {
 
     builder.watchClient()
 
-    expect(r).toBeCalledTimes(4)
+    expect(r).toBeCalledTimes(2)
   })
   test('should watch pages files', () => {
     const nuxt = createNuxt()
@@ -130,10 +129,11 @@ describe('builder: builder watch', () => {
 
     builder.watchClient()
 
-    expect(r).toBeCalledTimes(7)
+    expect(r).toBeCalledTimes(3)
-    expect(r).nthCalledWith(5, '/var/nuxt/src', '/var/nuxt/src/pages')
+    expect(r).nthCalledWith(3, '/var/nuxt/src', '/var/nuxt/src/pages')
-    expect(r).nthCalledWith(6, '/var/nuxt/src', '/var/nuxt/src/pages/*.{vue,js,ts,tsx}')
+
-    expect(r).nthCalledWith(7, '/var/nuxt/src', '/var/nuxt/src/pages/**/*.{vue,js,ts,tsx}')
+    expect(upath.normalizeSafe).toBeCalledTimes(3)
+    expect(upath.normalizeSafe).nthCalledWith(3, '/var/nuxt/src/pages/**/*.{vue,js,ts,tsx}', 2, expect.any(Array))
   })
 
   test('should invoke generateRoutesAndFiles on file refresh', () => {

packages/config/src/config/_common.js

@@ -66,7 +66,7 @@ export default () => ({
   // Watch
   watch: [],
   watchers: {
-    rewatchOnRawEvents: env.linux ? ['rename'] : undefined,
+    rewatchOnRawEvents: undefined,
     webpack: {},
     chokidar: {
       ignoreInitial: true

packages/config/test/__snapshots__/options.test.js.snap

@@ -363,9 +363,7 @@ Object {
     "chokidar": Object {
       "ignoreInitial": true,
     },
-    "rewatchOnRawEvents": Array [
+    "rewatchOnRawEvents": undefined,
-      "rename",
-    ],
     "webpack": Object {},
   },
 }

packages/config/test/config/__snapshots__/index.test.js.snap

@@ -327,9 +327,7 @@ Object {
     "chokidar": Object {
       "ignoreInitial": true,
     },
-    "rewatchOnRawEvents": Array [
+    "rewatchOnRawEvents": undefined,
-      "rename",
-    ],
     "webpack": Object {},
   },
 }
@@ -662,9 +660,7 @@ Object {
     "chokidar": Object {
       "ignoreInitial": true,
     },
-    "rewatchOnRawEvents": Array [
+    "rewatchOnRawEvents": undefined,
-      "rename",
-    ],
     "webpack": Object {},
   },
 }