fix: use separate watcher script for middleware in dev

packages/runtime/package.json

@@ -16,6 +16,7 @@
     "@netlify/ipx": "^1.3.1",
     "@vercel/node-bridge": "^2.1.0",
     "chalk": "^4.1.2",
+    "chokidar": "^3.5.3",
     "destr": "^1.1.1",
     "execa": "^5.1.1",
     "follow-redirects": "^1.15.2",

packages/runtime/src/helpers/dev.ts

@@ -1,11 +1,7 @@
-import type { Buffer } from 'buffer'
-import { resolve } from 'path'
-import { Transform } from 'stream'
+import { join } from 'path'
 
-import { OnPreBuild } from '@netlify/build'
+import type { OnPreBuild } from '@netlify/build'
 import execa from 'execa'
-import { unlink } from 'fs-extra'
-import mergeStream from 'merge-stream'
 
 import { writeDevEdgeFunction } from './edge'
 import { patchNextFiles } from './files'
@@ -17,37 +13,9 @@ export const onPreDev: OnPreBuild = async ({ constants, netlifyConfig }) => {
   // Need to patch the files, because build might not have been run
   await patchNextFiles(base)
 
-  //  Clean up old functions
-  await unlink(resolve('.netlify', 'middleware.js')).catch(() => {
-    // Ignore if it doesn't exist
-  })
   await writeDevEdgeFunction(constants)
-
-  // Eventually we might want to do this via esbuild's API, but for now the CLI works fine
-  const common = [`--bundle`, `--outdir=${resolve('.netlify')}`, `--format=esm`, `--target=esnext`, '--watch']
-  const opts = {
-    all: true,
-    env: { ...process.env, FORCE_COLOR: '1' },
-  }
-  // TypeScript
-  const tsout = execa(`esbuild`, [...common, resolve(base, 'middleware.ts')], opts).all
-
-  // JavaScript
-  const jsout = execa(`esbuild`, [...common, resolve(base, 'middleware.js')], opts).all
-
-  const filter = new Transform({
-    transform(chunk: Buffer, encoding, callback) {
-      const str = chunk.toString(encoding)
-
-      // Skip if message includes this, because we run even when the files are missing
-      if (!str.includes('[ERROR] Could not resolve')) {
-        this.push(chunk)
-      }
-      callback()
-    },
+  // Don't await this or it will never finish
+  execa.node(join(__dirname, 'watcher.js'), [base], {
+    stdio: 'inherit',
   })
-
-  mergeStream(tsout, jsout).pipe(filter).pipe(process.stdout)
-
-  // Don't return the promise because we don't want to wait for the child process to finish
 }

packages/runtime/src/helpers/watcher.ts

@@ -0,0 +1,91 @@
+import { promises } from 'fs'
+import { join } from 'path'
+
+import { build } from '@netlify/esbuild'
+import { watch } from 'chokidar'
+
+const fileList = (watched: Record<string, Array<string>>) =>
+  Object.entries(watched).flatMap(([dir, files]) => files.map((file) => join(dir, file)))
+
+const start = async (base: string) => {
+  const watcher = watch(['middleware.js', 'middleware.ts', 'src/middleware.js', 'src/middleware.ts'], {
+    // Try and ensure renames just emit one event
+    atomic: true,
+    // Don't emit for every watched file, just once after the scan is done
+    ignoreInitial: true,
+    cwd: base,
+  })
+
+  const update = async (initial = false) => {
+    try {
+      // Start by deleting the old file. If we error out, we don't want to leave the old file around
+      await promises.unlink(join(base, '.netlify', 'middleware.js'))
+    } catch {
+      // Ignore, because it's fine if it didn't exist
+    }
+    // The list of watched files is an object with the directory as the key and an array of files as the value.
+    // We need to flatten this into a list of files
+    const watchedFiles = fileList(watcher.getWatched())
+    if (watchedFiles.length === 0) {
+      if (!initial) {
+        // Only log on subsequent builds, because having it on first build makes it seem like a warning, when it's a normal state
+        console.log('No middleware found')
+      }
+      return
+    }
+    if (watchedFiles.length > 1) {
+      console.log('Multiple middleware files found:')
+      console.log(watchedFiles.join('\n'))
+      console.log('This is not supported.')
+      // Return without compiling anything
+      return
+    }
+    console.log(`${initial ? 'Building' : 'Rebuilding'} middleware ${watchedFiles[0]}...`)
+    try {
+      await build({
+        entryPoints: watchedFiles,
+        outfile: join(base, '.netlify', 'middleware.js'),
+        bundle: true,
+        format: 'esm',
+        target: 'esnext',
+      })
+    } catch (error) {
+      console.error(error)
+      return
+    }
+
+    console.log('...done')
+  }
+
+  try {
+    watcher
+      .on('change', (path) => {
+        console.log(`File ${path} has been changed`)
+        update()
+      })
+      .on('add', (path) => {
+        console.log(`File ${path} has been added`)
+        update()
+      })
+      .on('unlink', (path) => {
+        console.log(`File ${path} has been removed`)
+        update()
+      })
+      .on('ready', () => {
+        console.log('Initial scan complete. Ready for changes')
+        // This only happens on the first scan
+        update(true)
+      })
+    await new Promise((resolve) => {
+      watcher.on('close', resolve)
+    })
+  } finally {
+    await watcher.close()
+  }
+}
+
+start(process.argv[2]).catch((error) => {
+  console.error(error)
+  // eslint-disable-next-line n/no-process-exit
+  process.exit(1)
+})