fix: move config watcher to graph command (#4362)

* chore: move config watcher to graph command

* chore: npm run docs

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

docs/commands/dev.md

@@ -42,6 +42,7 @@ netlify dev
 netlify dev
 netlify dev -d public
 netlify dev -c "hugo server -w" --targetPort 1313
+netlify dev --graph
 BROWSER=none netlify dev # disable browser auto opening
 ```
 

src/commands/base-command.js

@@ -1,5 +1,4 @@
 // @ts-check
-const events = require('events')
 const process = require('process')
 const { format } = require('util')
 
@@ -29,7 +28,6 @@ const {
   pollForToken,
   sortOptions,
   track,
-  watchDebounced,
 } = require('../utils')
 
 // Netlify CLI client id. Lives in bot@netlify.com
@@ -121,11 +119,6 @@ class BaseCommand extends Command {
           await this.init(actionCommand)
           debug(`${name}:preAction`)('end')
         })
-        .hook('postAction', async () => {
-          if (this.configWatcherHandle) {
-            await this.configWatcherHandle.close()
-          }
-        })
     )
   }
 
@@ -437,27 +430,10 @@ class BaseCommand extends Command {
     const globalConfig = await getGlobalConfig()
     const { NetlifyAPI } = await jsClient
 
-    const configWatcher = new events.EventEmitter()
-
-    // Only set up a watcher if we know the config path.
-    if (configPath) {
-      const configWatcherHandle = await watchDebounced(configPath, {
-        depth: 1,
-        onChange: async () => {
-          const { config: newConfig } = await actionCommand.getConfig({ cwd, state, token, ...apiUrlOpts })
-
-          const normalizedNewConfig = normalizeConfig(newConfig)
-          configWatcher.emit('change', normalizedNewConfig)
-        },
-      })
-
-      // chokidar handler
-      this.configWatcherHandle = configWatcherHandle
-    }
-
     actionCommand.netlify = {
       // api methods
       api: new NetlifyAPI(token || '', apiOpts),
+      apiOpts,
       repositoryRoot,
       // current site context
       site: {
@@ -480,8 +456,6 @@ class BaseCommand extends Command {
       globalConfig,
       // state of current site dir
       state,
-      // netlify.toml file watcher
-      configWatcher,
     }
     debug(`${this.name()}:init`)('end')
   }

src/commands/dev/dev.js

@@ -1,4 +1,5 @@
 // @ts-check
+const events = require('events')
 const path = require('path')
 const process = require('process')
 const { promisify } = require('util')
@@ -35,13 +36,17 @@ const {
   exit,
   generateNetlifyGraphJWT,
   getSiteInformation,
+  getToken,
   injectEnvVariables,
   log,
+  normalizeConfig,
   openBrowser,
+  processOnExit,
   startForwardProxy,
   startLiveTunnel,
   startProxy,
   warn,
+  watchDebounced,
 } = require('../../utils')
 
 const { createDevExecCommand } = require('./dev-exec')
@@ -147,9 +152,7 @@ const runCommand = (command, env = {}) => {
 
       return await cleanupBeforeExit({ exitCode: 1 })
     })
-  ;['SIGINT', 'SIGTERM', 'SIGQUIT', 'SIGHUP', 'exit'].forEach((signal) => {
-    process.on(signal, async () => await cleanupBeforeExit({}))
-  })
+  processOnExit(async () => await cleanupBeforeExit({}))
 
   return commandProcess
 }
@@ -417,9 +420,31 @@ const dev = async (options, command) => {
       return oneGraphSessionId
     }
 
-    //
+    const configWatcher = new events.EventEmitter()
+
+    // Only set up a watcher if we know the config path.
+    const { configPath } = command.netlify.site
+    if (configPath) {
+      // chokidar handle
+      command.configWatcherHandle = await watchDebounced(configPath, {
+        depth: 1,
+        onChange: async () => {
+          const cwd = options.cwd || process.cwd()
+          const [token] = await getToken(options.auth)
+          const { config: newConfig } = await command.getConfig({ cwd, state, token, ...command.netlify.apiUrlOpts })
+
+          const normalizedNewConfig = normalizeConfig(newConfig)
+          configWatcher.emit('change', normalizedNewConfig)
+        },
+      })
+
+      processOnExit(async () => {
+        await command.configWatcherHandle.close()
+      })
+    }
+
     // Set up a handler for config changes.
-    command.netlify.configWatcher.on('change', (newConfig) => {
+    configWatcher.on('change', (newConfig) => {
       command.netlify.config = newConfig
       stopWatchingCLISessions()
       createOrResumeSession()
@@ -486,8 +511,10 @@ const createDevCommand = (program) => {
       'netlify dev',
       'netlify dev -d public',
       'netlify dev -c "hugo server -w" --targetPort 1313',
+      'netlify dev --graph',
       'BROWSER=none netlify dev # disable browser auto opening',
     ])
     .action(dev)
 }
+
 module.exports = { createDevCommand }

src/utils/dev.js

@@ -215,9 +215,17 @@ const generateNetlifyGraphJWT = ({ authlifyTokenId, netlifyToken, siteId }) => {
   )
 }
 
+const processOnExit = (fn) => {
+  const signals = ['SIGINT', 'SIGTERM', 'SIGQUIT', 'SIGHUP', 'exit']
+  signals.forEach((signal) => {
+    process.on(signal, fn)
+  })
+}
+
 module.exports = {
   getSiteInformation,
   injectEnvVariables,
   acquirePort,
   generateNetlifyGraphJWT,
+  processOnExit,
 }