feat: serve bundled functions in ntl dev (#2094)

* feat: serve bundled functions in ntl dev

* feat: use function builder API

* feat: add omitFileChangesLog property

* fix: use errorExit instead of process.exit

* feat: use zisi builder only when esbuild is enabled

* chore: add function builder tests

* chore: remove warning message

Author: eduardoboucas

package-lock.json

@@ -249,6 +249,7 @@ class DevCommand extends Command {
     }
 
     await startFunctionsServer({
+      config,
       settings,
       site,
       log,

src/commands/dev/index.js

@@ -0,0 +1,71 @@
+const path = require('path')
+
+const { zipFunction, zipFunctions } = require('@netlify/zip-it-and-ship-it')
+const makeDir = require('make-dir')
+
+const { getPathInProject } = require('../lib/settings')
+const { NETLIFYDEVERR } = require('../utils/logo')
+
+const bundleFunctions = ({ config, sourceDirectory, targetDirectory, updatedPath }) => {
+  // If `updatedPath` is truthy, it means we're running the build command due
+  // to an update to a file. If that's the case, we run `zipFunction` to bundle
+  // that specific function only.
+  if (updatedPath) {
+    return zipFunction(updatedPath, targetDirectory, {
+      archiveFormat: 'none',
+      config,
+    })
+  }
+
+  return zipFunctions(sourceDirectory, targetDirectory, {
+    archiveFormat: 'none',
+    config,
+  })
+}
+
+// The function configuration keys returned by @netlify/config are not an exact
+// match to the properties that @netlify/zip-it-and-ship-it expects. We do that
+// translation here.
+const normalizeFunctionsConfig = (functionsConfig = {}) =>
+  Object.entries(functionsConfig).reduce(
+    (result, [pattern, config]) => ({
+      ...result,
+      [pattern]: {
+        externalNodeModules: config.external_node_modules,
+        ignoredNodeModules: config.ignored_node_modules,
+        nodeBundler: config.node_bundler === 'esbuild' ? 'esbuild_zisi' : config.node_bundler,
+      },
+    }),
+    {},
+  )
+
+const getTargetDirectory = async ({ errorExit }) => {
+  const targetDirectory = path.resolve(getPathInProject(['functions-serve']))
+
+  try {
+    await makeDir(targetDirectory)
+  } catch (error) {
+    errorExit(`${NETLIFYDEVERR} Could not create directory: ${targetDirectory}`)
+  }
+
+  return targetDirectory
+}
+
+module.exports = async function handler({ config, errorExit, functionsDirectory: sourceDirectory }) {
+  const functionsConfig = normalizeFunctionsConfig(config.functions)
+  const isUsingEsbuild = functionsConfig['*'] && functionsConfig['*'].nodeBundler === 'esbuild_zisi'
+
+  if (!isUsingEsbuild) {
+    return false
+  }
+
+  const targetDirectory = await getTargetDirectory({ errorExit })
+
+  return {
+    build: (updatedPath) => bundleFunctions({ config: functionsConfig, sourceDirectory, targetDirectory, updatedPath }),
+    builderName: 'zip-it-and-ship-it',
+    omitFileChangesLog: true,
+    src: sourceDirectory,
+    target: targetDirectory,
+  }
+}

src/function-builder-detectors/zisi.js

@@ -1,17 +1,19 @@
 const fs = require('fs')
 const path = require('path')
 
-const detectFunctionsBuilder = async function (projectDir) {
+const detectFunctionsBuilder = async function (parameters) {
   const detectors = fs
     .readdirSync(path.join(__dirname, '..', 'function-builder-detectors'))
     // only accept .js detector files
     .filter((filename) => filename.endsWith('.js'))
+    // Sorting by filename
+    .sort()
     // eslint-disable-next-line node/global-require, import/no-dynamic-require
     .map((det) => require(path.join(__dirname, '..', `function-builder-detectors/${det}`)))
 
   for (const detector of detectors) {
     // eslint-disable-next-line no-await-in-loop
-    const settings = await detector(projectDir)
+    const settings = await detector(parameters)
     if (settings) {
       return settings
     }

src/utils/detect-functions-builder.js

@@ -20,7 +20,7 @@ const { getLogMessage } = require('../lib/log')
 
 const { detectFunctionsBuilder } = require('./detect-functions-builder')
 const { getFunctions } = require('./get-functions')
-const { NETLIFYDEVLOG, NETLIFYDEVWARN, NETLIFYDEVERR } = require('./logo')
+const { NETLIFYDEVLOG, NETLIFYDEVERR } = require('./logo')
 
 const formatLambdaLocalError = (err) => `${err.errorType}: ${err.errorMessage}\n  ${err.stackTrace.join('\n  ')}`
 
@@ -153,12 +153,18 @@ const buildClientContext = function (headers) {
   }
 }
 
-const clearCache = (action) => (path) => {
-  console.log(`${NETLIFYDEVLOG} ${path} ${action}, reloading...`)
+const clearCache = ({ action, omitLog }) => (path) => {
+  if (!omitLog) {
+    console.log(`${NETLIFYDEVLOG} ${path} ${action}, reloading...`)
+  }
+
   Object.keys(require.cache).forEach((key) => {
     delete require.cache[key]
   })
-  console.log(`${NETLIFYDEVLOG} ${path} ${action}, successfully reloaded!`)
+
+  if (!omitLog) {
+    console.log(`${NETLIFYDEVLOG} ${path} ${action}, successfully reloaded!`)
+  }
 }
 
 const shouldBase64Encode = function (contentType) {
@@ -173,11 +179,13 @@ const validateFunctions = function ({ functions, capabilities, warn }) {
   }
 }
 
-const createHandler = async function ({ dir, capabilities, warn }) {
+const createHandler = async function ({ dir, capabilities, omitFileChangesLog, warn }) {
   const functions = await getFunctions(dir)
   validateFunctions({ functions, capabilities, warn })
   const watcher = chokidar.watch(dir, { ignored: /node_modules/ })
-  watcher.on('change', clearCache('modified')).on('unlink', clearCache('deleted'))
+  watcher
+    .on('change', clearCache({ action: 'modified', omitLog: omitFileChangesLog }))
+    .on('unlink', clearCache({ action: 'deleted', omitLog: omitFileChangesLog }))
 
   const logger = winston.createLogger({
     levels: winston.config.npm.levels,
@@ -363,7 +371,7 @@ const createFormSubmissionHandler = function ({ siteUrl, warn }) {
   }
 }
 
-const getFunctionsServer = async function ({ dir, siteUrl, capabilities, warn }) {
+const getFunctionsServer = async function ({ dir, omitFileChangesLog, siteUrl, capabilities, warn }) {
   const app = express()
   app.set('query parser', 'simple')
 
@@ -385,21 +393,21 @@ const getFunctionsServer = async function ({ dir, siteUrl, capabilities, warn })
     res.status(204).end()
   })
 
-  app.all('*', await createHandler({ dir, capabilities, warn }))
+  app.all('*', await createHandler({ dir, capabilities, omitFileChangesLog, warn }))
 
   return app
 }
 
 const getBuildFunction = ({ functionBuilder, log }) =>
-  async function build() {
+  async function build(updatedPath) {
     log(
       `${NETLIFYDEVLOG} Function builder ${chalk.yellow(functionBuilder.builderName)} ${chalk.magenta(
         'building',
       )} functions from directory ${chalk.yellow(functionBuilder.src)}`,
     )
 
     try {
-      await functionBuilder.build()
+      await functionBuilder.build(updatedPath)
       log(
         `${NETLIFYDEVLOG} Function builder ${chalk.yellow(functionBuilder.builderName)} ${chalk.green(
           'finished',
@@ -417,32 +425,40 @@ const getBuildFunction = ({ functionBuilder, log }) =>
     }
   }
 
-const setupFunctionsBuilder = async ({ site, log, warn }) => {
-  const functionBuilder = await detectFunctionsBuilder(site.root)
-  if (functionBuilder) {
-    log(
-      `${NETLIFYDEVLOG} Function builder ${chalk.yellow(
-        functionBuilder.builderName,
-      )} detected: Running npm script ${chalk.yellow(functionBuilder.npmScript)}`,
-    )
-    warn(
-      `${NETLIFYDEVWARN} This is a beta feature, please give us feedback on how to improve at https://github.com/netlify/cli/`,
-    )
+const setupFunctionsBuilder = async ({ config, errorExit, functionsDirectory, log, site }) => {
+  const functionBuilder = await detectFunctionsBuilder({
+    config,
+    errorExit,
+    functionsDirectory,
+    log,
+    projectRoot: site.root,
+  })
 
-    const debouncedBuild = debounce(getBuildFunction({ functionBuilder, log }), 300, {
-      leading: true,
-      trailing: true,
-    })
+  if (!functionBuilder) {
+    return {}
+  }
 
-    await debouncedBuild()
+  const npmScriptString = functionBuilder.npmScript
+    ? `: Running npm script ${chalk.yellow(functionBuilder.npmScript)}`
+    : ''
 
-    const functionWatcher = chokidar.watch(functionBuilder.src)
-    functionWatcher.on('ready', () => {
-      functionWatcher.on('add', debouncedBuild)
-      functionWatcher.on('change', debouncedBuild)
-      functionWatcher.on('unlink', debouncedBuild)
-    })
-  }
+  log(`${NETLIFYDEVLOG} Function builder ${chalk.yellow(functionBuilder.builderName)} detected${npmScriptString}.`)
+
+  const debouncedBuild = debounce(getBuildFunction({ functionBuilder, log }), 300, {
+    leading: true,
+    trailing: true,
+  })
+
+  await debouncedBuild()
+
+  const functionWatcher = chokidar.watch(functionBuilder.src)
+  functionWatcher.on('ready', () => {
+    functionWatcher.on('add', debouncedBuild)
+    functionWatcher.on('change', debouncedBuild)
+    functionWatcher.on('unlink', debouncedBuild)
+  })
+
+  return functionBuilder
 }
 
 const startServer = async ({ server, settings, log, errorExit }) => {
@@ -458,12 +474,25 @@ const startServer = async ({ server, settings, log, errorExit }) => {
   })
 }
 
-const startFunctionsServer = async ({ settings, site, log, warn, errorExit, siteUrl, capabilities }) => {
+const startFunctionsServer = async ({ config, settings, site, log, warn, errorExit, siteUrl, capabilities }) => {
   // serve functions from zip-it-and-ship-it
   // env variables relies on `url`, careful moving this code
   if (settings.functions) {
-    await setupFunctionsBuilder({ site, log, warn })
-    const server = await getFunctionsServer({ dir: settings.functions, siteUrl, capabilities, warn })
+    const { omitFileChangesLog, target: functionsDirectory } = await setupFunctionsBuilder({
+      config,
+      errorExit,
+      functionsDirectory: settings.functions,
+      log,
+      site,
+    })
+    const server = await getFunctionsServer({
+      dir: functionsDirectory || settings.functions,
+      omitFileChangesLog,
+      siteUrl,
+      capabilities,
+      warn,
+    })
+
     await startServer({ server, settings, log, errorExit })
   }
 }