fix: use separate watcher script for middleware in dev

.github/workflows/test.yml

@@ -7,6 +7,10 @@ on:
   schedule:
     - cron: '0 0 * * *'
 
+concurrency:
+  group: ${{ github.head_ref }}
+  cancel-in-progress: true
+
 jobs:
   build:
     name: Unit tests

package.json

@@ -105,7 +105,8 @@
       "\\.[jt]sx?$": "babel-jest"
     },
     "verbose": true,
-    "testTimeout": 60000
+    "testTimeout": 60000,
+    "maxWorkers": 1
   },
   "jest-junit": {
     "outputDirectory": "reports",

packages/runtime/package.json

@@ -16,6 +16,7 @@
     "@netlify/ipx": "^1.3.2",
     "@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/compiler.ts

@@ -0,0 +1,108 @@
+import { promises } from 'fs'
+import { join } from 'path'
+
+import { build } from '@netlify/esbuild'
+import { FSWatcher, watch } from 'chokidar'
+
+const toFileList = (watched: Record<string, Array<string>>) =>
+  Object.entries(watched).flatMap(([dir, files]) => files.map((file) => join(dir, file)))
+
+/**
+ * Compile the middleware file using esbuild
+ */
+
+const buildMiddlewareFile = async (entryPoints: Array<string>, base: string) => {
+  try {
+    await build({
+      entryPoints,
+      outfile: join(base, '.netlify', 'middleware.js'),
+      bundle: true,
+      format: 'esm',
+      target: 'esnext',
+      absWorkingDir: base,
+    })
+  } catch (error) {
+    console.error(error.toString())
+  }
+}
+
+/**
+ * We only compile middleware if there's exactly one file. If there's more than one, we log a warning and don't compile.
+ */
+const shouldFilesBeCompiled = (watchedFiles: Array<string>, isFirstRun: boolean) => {
+  if (watchedFiles.length === 0) {
+    if (!isFirstRun) {
+      // 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 false
+  }
+  if (watchedFiles.length > 1) {
+    console.log('Multiple middleware files found:')
+    console.log(watchedFiles.join('\n'))
+    console.log('This is not supported.')
+    return false
+  }
+  return true
+}
+
+const updateWatchedFiles = async (watcher: FSWatcher, base: string, isFirstRun = 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 = toFileList(watcher.getWatched())
+  if (!shouldFilesBeCompiled(watchedFiles, isFirstRun)) {
+    watcher.emit('build')
+    return
+  }
+  console.log(`${isFirstRun ? 'Building' : 'Rebuilding'} middleware ${watchedFiles[0]}...`)
+  await buildMiddlewareFile(watchedFiles, base)
+  console.log('...done')
+  watcher.emit('build')
+}
+
+export const startWatching = (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,
+  })
+
+  watcher
+    .on('change', (path) => {
+      console.log(`File ${path} has been changed`)
+      updateWatchedFiles(watcher, base)
+    })
+    .on('add', (path) => {
+      console.log(`File ${path} has been added`)
+      updateWatchedFiles(watcher, base)
+    })
+    .on('unlink', (path) => {
+      console.log(`File ${path} has been removed`)
+      updateWatchedFiles(watcher, base)
+    })
+
+  return {
+    watcher,
+    isReady: new Promise<void>((resolve) => {
+      watcher.on('ready', async () => {
+        console.log('Initial scan complete. Ready for changes')
+        // This only happens on the first scan
+        await updateWatchedFiles(watcher, base, true)
+        console.log('Ready')
+        resolve()
+      })
+    }),
+    nextBuild: () =>
+      new Promise<void>((resolve) => {
+        watcher.once('build', resolve)
+      }),
+  }
+}