feat: netlify dev --graph: watch config.toml and reload automatically

src/commands/base-command.js

@@ -1,4 +1,5 @@
 // @ts-check
+const events = require('events')
 const process = require('process')
 const { format } = require('util')
 
@@ -28,6 +29,7 @@ const {
   pollForToken,
   sortOptions,
   track,
+  watchDebounced,
 } = require('../utils')
 
 // Netlify CLI client id. Lives in bot@netlify.com
@@ -429,6 +431,17 @@ class BaseCommand extends Command {
     const apiOpts = { ...apiUrlOpts, agent }
     const globalConfig = await getGlobalConfig()
     const { NetlifyAPI } = await jsClient
+    const configWatcher = new events.EventEmitter()
+
+    watchDebounced(configPath, {
+      depth: 1,
+      onChange: async () => {
+        const { config: newConfig } = await actionCommand.getConfig({ cwd, state, token, ...apiUrlOpts })
+
+        const normalizedNewConfig = normalizeConfig(newConfig)
+        configWatcher.emit('change', normalizedNewConfig)
+      },
+    })
 
     actionCommand.netlify = {
       // api methods
@@ -455,6 +468,8 @@ 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

@@ -322,27 +322,42 @@ const dev = async (options, command) => {
   } else if (startNetlifyGraphWatcher) {
     const netlifyToken = await command.authenticate()
     await OneGraphCliClient.ensureAppForSite(netlifyToken, site.id)
-    const netlifyGraphConfig = await getNetlifyGraphConfig({ command, options, settings })
 
-    let graphqlDocument = readGraphQLOperationsSourceFile(netlifyGraphConfig)
+    let stopWatchingCLISessions
 
-    if (!graphqlDocument || graphqlDocument.trim().length === 0) {
-      graphqlDocument = defaultExampleOperationsDoc
-    }
+    const startWork = async function () {
+      const netlifyGraphConfig = await getNetlifyGraphConfig({ command, options, settings })
 
-    await startOneGraphCLISession({ netlifyGraphConfig, netlifyToken, site, state })
+      let graphqlDocument = readGraphQLOperationsSourceFile(netlifyGraphConfig)
 
-    // Should be created by startOneGraphCLISession
-    const oneGraphSessionId = loadCLISession(state)
+      if (!graphqlDocument || graphqlDocument.trim().length === 0) {
+        graphqlDocument = defaultExampleOperationsDoc
+      }
 
-    await persistNewOperationsDocForSession({
-      netlifyToken,
-      oneGraphSessionId,
-      operationsDoc: graphqlDocument,
-      siteId: site.id,
+      stopWatchingCLISessions = await startOneGraphCLISession({ netlifyGraphConfig, netlifyToken, site, state })
+
+      // Should be created by startOneGraphCLISession
+      const oneGraphSessionId = loadCLISession(state)
+
+      await persistNewOperationsDocForSession({
+        netlifyToken,
+        oneGraphSessionId,
+        operationsDoc: graphqlDocument,
+        siteId: site.id,
+      })
+
+      const graphEditUrl = getGraphEditUrlBySiteId({ siteId: site.id, oneGraphSessionId })
+      return graphEditUrl
+    }
+
+    // Set up a handler for config changes.
+    command.netlify.configWatcher.on('change', (newConfig) => {
+      command.netlify.config = newConfig
+      stopWatchingCLISessions()
+      startWork()
     })
 
-    const graphEditUrl = getGraphEditUrlBySiteId({ siteId: site.id, oneGraphSessionId })
+    const graphEditUrl = await startWork()
 
     log(
       `Starting Netlify Graph session, to edit your library visit ${graphEditUrl} or run \`netlify graph:edit\` in another tab`,

src/lib/functions/registry.js

@@ -5,12 +5,11 @@ const { env } = require('process')
 
 const terminalLink = require('terminal-link')
 
-const { NETLIFYDEVERR, NETLIFYDEVLOG, NETLIFYDEVWARN, chalk, log, warn } = require('../../utils')
+const { NETLIFYDEVERR, NETLIFYDEVLOG, NETLIFYDEVWARN, chalk, log, warn, watchDebounced } = require('../../utils')
 const { getLogMessage } = require('../log')
 
 const { NetlifyFunction } = require('./netlify-function')
 const runtimes = require('./runtimes')
-const { watchDebounced } = require('./watcher')
 
 const ZIP_EXTENSION = '.zip'
 

src/lib/one-graph/cli-client.js

@@ -10,8 +10,7 @@ const { GraphQL, InternalConsole, OneGraphClient } = require('netlify-onegraph-i
 const { NetlifyGraph } = require('netlify-onegraph-internal')
 
 // eslint-disable-next-line no-unused-vars
-const { StateConfig, USER_AGENT, chalk, error, log, warn } = require('../../utils')
-const { watchDebounced } = require('../functions/watcher')
+const { StateConfig, USER_AGENT, chalk, error, log, warn, watchDebounced } = require('../../utils')
 
 const {
   generateFunctionsFile,
@@ -90,7 +89,7 @@ const monitorCLISessionEvents = (input) => {
   const helper = async () => {
     if (shouldClose) {
       clearTimeout(handle)
-      onClose()
+      onClose && onClose()
     }
 
     const next = await OneGraphClient.fetchCliSessionEvents({ appId, authToken: netlifyToken, sessionId })
@@ -446,7 +445,7 @@ const startOneGraphCLISession = async (input) => {
   const enabledServices = []
   const schema = await OneGraphClient.fetchOneGraphSchema(site.id, enabledServices)
 
-  monitorOperationFile({
+  const opsFileWatcher = monitorOperationFile({
     netlifyGraphConfig,
     onChange: async (filePath) => {
       log('NetlifyGraph operation file changed at', filePath, 'updating function library...')
@@ -476,7 +475,7 @@ const startOneGraphCLISession = async (input) => {
     },
   })
 
-  monitorCLISessionEvents({
+  const cliEventsCloseFn = monitorCLISessionEvents({
     appId: site.id,
     netlifyToken,
     netlifyGraphConfig,
@@ -494,10 +493,13 @@ const startOneGraphCLISession = async (input) => {
     onError: (fetchEventError) => {
       error(`Netlify Graph upstream error: ${fetchEventError}`)
     },
-    onClose: () => {
-      log('Netlify Graph upstream closed')
-    },
   })
+
+  return async function unregisterWatchers() {
+    const watcher = await opsFileWatcher
+    watcher.close()
+    cliEventsCloseFn()
+  }
 }
 
 /**

src/utils/command-helpers.js

@@ -4,8 +4,12 @@ const process = require('process')
 const { format, inspect } = require('util')
 
 const { Instance: ChalkInstance } = require('chalk')
+const chokidar = require('chokidar')
+const decache = require('decache')
 const WSL = require('is-wsl')
+const debounce = require('lodash/debounce')
 const { default: omit } = require('omit.js')
+const pEvent = require('p-event')
 
 const { name, version } = require('../../package.json')
 const { clearSpinner, startSpinner } = require('../lib/spinner')
@@ -198,6 +202,34 @@ const normalizeConfig = (config) =>
     ? { ...config, build: omit(config.build, ['publish', 'publishOrigin']) }
     : config
 
+const DEBOUNCE_WAIT = 100
+
+const watchDebounced = async (target, { depth, onAdd = () => {}, onChange = () => {}, onUnlink = () => {} }) => {
+  const watcher = chokidar.watch(target, { depth, ignored: /node_modules/, ignoreInitial: true })
+
+  await pEvent(watcher, 'ready')
+
+  const debouncedOnChange = debounce(onChange, DEBOUNCE_WAIT)
+  const debouncedOnUnlink = debounce(onUnlink, DEBOUNCE_WAIT)
+  const debouncedOnAdd = debounce(onAdd, DEBOUNCE_WAIT)
+
+  watcher
+    .on('change', (path) => {
+      decache(path)
+      debouncedOnChange(path)
+    })
+    .on('unlink', (path) => {
+      decache(path)
+      debouncedOnUnlink(path)
+    })
+    .on('add', (path) => {
+      decache(path)
+      debouncedOnAdd(path)
+    })
+
+  return watcher
+}
+
 module.exports = {
   BANG,
   chalk,
@@ -217,4 +249,5 @@ module.exports = {
   sortOptions,
   USER_AGENT,
   warn,
+  watchDebounced,
 }