chore: improve watcher and change ignorePrefix

packages/nuxt3/src/builder/builder.ts

@@ -1,11 +1,18 @@
-import { join } from 'path'
+import { join, relative } from 'path'
 import fsExtra from 'fs-extra'
 import consola from 'consola'
+import { debounce } from 'lodash'
 import { BundleBuilder } from 'src/webpack'
 import { Nuxt } from '../core'
-import { compileTemplates, scanTemplates, NuxtTemplate } from './template'
+import {
+  templateData,
+  compileTemplates,
+  scanTemplates,
+  NuxtTemplate
+} from './template'
 import { createWatcher } from './watch'
 import { resolveApp, NuxtApp } from './app'
+import Ignore from './ignore'
 
 export class Builder {
   nuxt: Nuxt
@@ -36,26 +43,34 @@ async function build (builder: Builder) {
 
 function watch (builder: Builder) {
   const { nuxt } = builder
+  const ignore = new Ignore({
+    rootDir: nuxt.options.srcDir,
+    ignoreArray: nuxt.options.ignore.concat(
+      relative(nuxt.options.rootDir, nuxt.options.buildDir)
+    )
+  })
 
   // Watch internal templates
-  const nuxtAppWatcher = createWatcher(nuxt.options.appDir)
-  // nuxtAppWatcher.debug()
+  const options = nuxt.options.watchers.chokidar
+  const nuxtAppWatcher = createWatcher(nuxt.options.appDir, options, ignore)
   nuxtAppWatcher.watchAll(async () => {
     consola.log('Re-generate templates')
     await compileTemplates(builder.templates, nuxt.options.buildDir)
   })
 
   // Watch user app
-  const appWatcher = createWatcher(builder.app.srcDir, {
-    ignored: [
-      nuxt.options.buildDir
-    ]
-  })
-  // appWatcher.debug()
-  appWatcher.watch(/(A|a)pp\.[a-z]{2,3}/, async () => {
-    await new Promise(resolve => setTimeout(resolve, 200))
-    await generate(builder)
-  })
+  const appWatcher = createWatcher(builder.app.srcDir, options, ignore)
+  // Watch for App.vue creation
+  // appWatcher.debug('srcDir')
+  appWatcher.watch(
+    /^(A|a)pp\.[a-z]{2,3}/,
+    debounce(({ event }) => {
+      if (['add', 'unlink'].includes(event)) {
+        generate(builder)
+      }
+    }, 50)
+  )
+  // Watch for page changes
   appWatcher.watch('pages/', async () => {
     consola.log('Re-generate routes')
     await compileTemplates(builder.templates, nuxt.options.buildDir)
@@ -69,13 +84,9 @@ export async function generate (builder: Builder) {
   builder.app = resolveApp(nuxt, nuxt.options.srcDir)
 
   const templatesDir = join(builder.nuxt.options.appDir, '_templates')
-  const appTemplates = await scanTemplates(templatesDir, {
-    app: builder.app
-  })
+  const appTemplates = await scanTemplates(templatesDir, templateData(builder))
 
-  builder.templates = [
-    ...appTemplates
-  ]
+  builder.templates = [...appTemplates]
 
   await compileTemplates(builder.templates, nuxt.options.buildDir)
 }

packages/nuxt3/src/builder/ignore.ts

@@ -67,6 +67,10 @@ export default class Ignore {
     return paths
   }
 
+  ignores (pathname: string) {
+    return this.ignore && this.ignore.ignores(pathname)
+  }
+
   reload () {
     delete this.ignore
     delete this.ignoreFile

packages/nuxt3/src/builder/template.ts

@@ -1,7 +1,6 @@
 import { join, relative, dirname } from 'path'
 import fsExtra from 'fs-extra'
 import globby from 'globby'
-import consola from 'consola'
 import lodashTemplate from 'lodash/template'
 
 export interface NuxtTemplate {
@@ -10,11 +9,17 @@ export interface NuxtTemplate {
   data?: any
 }
 
+export function templateData (builder) {
+  return {
+    app: builder.app
+  }
+}
+
 async function compileTemplate ({ src, path, data }: NuxtTemplate, destDir: string) {
   const srcContents = await fsExtra.readFile(src, 'utf-8')
   const compiledSrc = lodashTemplate(srcContents, {})(data)
   const dest = join(destDir, path)
-  consola.log('Compile template', dest)
+  // consola.log('Compile template', dest)
   await fsExtra.mkdirp(dirname(dest))
   await fsExtra.writeFile(dest, compiledSrc)
 }

packages/nuxt3/src/builder/watch.ts

@@ -1,20 +1,23 @@
-import { relative } from 'path'
 import chokidar, { WatchOptions } from 'chokidar'
+import defu from 'defu'
 import consola from 'consola'
+import Ignore from './ignore'
 
-export function createWatcher (dir: string, options?: WatchOptions) {
-  const watcher = chokidar.watch(dir, {
+export function createWatcher (
+  dir: string,
+  options?: WatchOptions,
+  ignore?: Ignore
+) {
+  const opts = defu({ cwd: dir }, options, {
     ignored: [],
-    ignoreInitial: true,
-    ...options
+    ignoreInitial: true
   })
-
+  const watcher = chokidar.watch(dir, opts)
   const watchAll = (cb: Function, filter?: Function) => {
-    watcher.on('raw', (event, path: string, _details) => {
-      if (options.ignored.find(ignore => path.match(ignore))) {
-        return // 🖕 chokidar ignored option
+    watcher.on('all', (event, path: string) => {
+      if (ignore && ignore.ignores(path)) {
+        return
       }
-      path = relative(dir, path)
       const _event = { event, path }
       if (!filter || filter(_event)) {
         cb(_event)
@@ -22,7 +25,8 @@ export function createWatcher (dir: string, options?: WatchOptions) {
     })
   }
 
-  const watch = (pattern: string| RegExp, cb: Function) => watchAll(cb, e => e.path.match(pattern))
+  const watch = (pattern: string | RegExp, cb: Function) =>
+    watchAll(cb, e => e.path.match(pattern))
 
   const debug = (tag: string = '[Watcher]') => {
     consola.log(tag, 'Watching ', dir)

packages/nuxt3/src/config/config/_common.ts

@@ -122,7 +122,6 @@ interface CommonConfiguration {
   styleExtensions: string[]
   watch: string[]
   watchers: {
-    rewatchOnRawEvents?: boolean
     webpack: WebpackConfiguration['watchOptions']
     chokidar: ChokidarWatchOptions
   }
@@ -189,7 +188,7 @@ export default (): CommonConfiguration => ({
 
   // Ignores
   ignoreOptions: undefined,
-  ignorePrefix: '-',
+  ignorePrefix: '_',
   ignore: [
     '**/*.test.*',
     '**/*.spec.*'
@@ -198,7 +197,6 @@ export default (): CommonConfiguration => ({
   // Watch
   watch: [],
   watchers: {
-    rewatchOnRawEvents: undefined,
     webpack: {
       aggregateTimeout: 1000
     },