feat(gatsby-plugin-functions): Add the ability to run functions locally and on Gatsby Cloud

packages/gatsby-plugin-functions/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": [["babel-preset-gatsby-package", { "browser": true }]]
+}

packages/gatsby-plugin-functions/.gitignore

@@ -0,0 +1,33 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+
+decls
+dist
+
+/*.js
+!index.js

packages/gatsby-plugin-functions/.npmignore

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+*.un~
+yarn.lock
+src
+flow-typed
+coverage
+decls
+examples

packages/gatsby-plugin-functions/index.js

@@ -0,0 +1 @@
+"use strict";

packages/gatsby-plugin-functions/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "gatsby-plugin-functions",
+  "version": "0.1.0-7",
+  "description": "Gatsby plugin that automatically creates serverless functions from files in specified directories",
+  "main": "index.js",
+  "scripts": {
+    "build": "babel src --out-dir . --ignore \"**/__tests__\" --extensions \".ts,.js\"",
+    "watch": "babel -w src --out-dir . --ignore \"**/__tests__\" --extensions \".ts,.js\"",
+    "prepare": "cross-env NODE_ENV=production npm run build"
+  },
+  "author": "Sid Chatterjee <me@sidharthachatterjee.com>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gatsbyjs/gatsby.git",
+    "directory": "packages/gatsby-plugin-functions"
+  },
+  "dependencies": {
+    "@babel/core": "^7.12.8",
+    "@babel/preset-env": "^7.12.7",
+    "@sindresorhus/slugify": "^1.1.0",
+    "babel-loader": "^8.2.1",
+    "chokidar": "^3.4.2",
+    "fs-exists-cached": "^1.0.0",
+    "gatsby-core-utils": "^1.5.0",
+    "gatsby-page-utils": "^0.4.0-next.0",
+    "globby": "^11.0.1",
+    "lodash": "^4.17.20",
+    "webpack": "^5.4.0",
+    "multer": "^1.4.2"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.11.6",
+    "@babel/core": "^7.11.6",
+    "babel-preset-gatsby-package": "^0.7.0-next.0",
+    "cross-env": "^7.0.2"
+  },
+  "peerDependencies": {
+    "gatsby": "^3.0.0"
+  },
+  "engines": {
+    "node": ">=10.13.0"
+  },
+  "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-functions#readme",
+  "license": "MIT"
+}

packages/gatsby-plugin-functions/src/gatsby-node.ts

@@ -0,0 +1,181 @@
+import fs from "fs-extra"
+import glob from "globby"
+import path from "path"
+import webpack from "webpack"
+import multer from "multer"
+import * as express from "express"
+
+import { urlResolve } from "gatsby-core-utils"
+
+import {
+  ParentSpanPluginArgs,
+  PluginOptions,
+  CreateDevServerArgs,
+} from "gatsby"
+
+const DEFAULT_FUNCTIONS_DIRECTORY_PATH = path.join(process.cwd(), `src/api`)
+
+export async function onPreBootstrap(
+  { reporter }: ParentSpanPluginArgs,
+  {
+    path: functionsDirectoryPath = DEFAULT_FUNCTIONS_DIRECTORY_PATH,
+  }: PluginOptions
+): Promise<void> {
+  const activity = reporter.activityTimer(`Compiling Gatsby Functions`)
+  activity.start()
+
+  const functionsDirectory = path.resolve(
+    process.cwd(),
+    functionsDirectoryPath as string
+  )
+
+  const functionsGlob = `**/*.{js,ts}`
+
+  // Get initial list of files
+  const files = await glob(functionsGlob, { cwd: functionsDirectory })
+
+  if (files?.length === 0) {
+    reporter.warn(
+      `No functions found in directory: ${path.relative(
+        process.cwd(),
+        functionsDirectory
+      )}`
+    )
+    return
+  }
+
+  await fs.ensureDir(path.join(process.cwd(), `.cache`, `functions`))
+
+  await fs.emptyDir(path.join(process.cwd(), `.cache`, `functions`))
+
+  const gatsbyVarObject = Object.keys(process.env).reduce((acc, key) => {
+    if (key.match(/^GATSBY_/)) {
+      acc[key] = JSON.stringify(process.env[key])
+    }
+    return acc
+  }, {})
+
+  const varObject = Object.keys(gatsbyVarObject).reduce(
+    (acc, key) => {
+      acc[`process.env.${key}`] = gatsbyVarObject[key]
+      return acc
+    },
+    {
+      "process.env": `({})`,
+    }
+  )
+
+  try {
+    await Promise.all(
+      files.map(file => {
+        const config = {
+          entry: path.join(functionsDirectory, file),
+          output: {
+            path: path.join(process.cwd(), `.cache`, `functions`),
+            filename: file.replace(`.ts`, `.js`),
+            libraryTarget: `commonjs2`,
+          },
+          target: `node`,
+          // library: "yourLibName",
+
+          mode: `production`,
+          module: {
+            rules: [
+              {
+                test: [/.js$/, /.ts$/],
+                exclude: /node_modules/,
+                loader: `babel-loader`,
+              },
+            ],
+          },
+          plugins: [new webpack.DefinePlugin(varObject)],
+          // devtool: `source-map`,
+        }
+
+        return new Promise((resolve, reject) =>
+          // if (stage === `develop`) {
+          //   webpack(config).watch({}, () => {})
+
+          //   return resolve()
+          // }
+
+          webpack(config).run((err, stats) => {
+            if (stats?.compilation?.warnings?.length > 0) {
+              reporter.warn(stats.compilation.warnings)
+            }
+
+            if (err) return reject(err)
+            const errors = stats.compilation.errors || []
+            if (errors.length > 0) return reject(stats.compilation.errors)
+            return resolve()
+          })
+        )
+      })
+    )
+  } catch (e) {
+    activity.panic(`Failed to compile Gatsby Functions.`, e)
+  }
+
+  activity.end()
+}
+
+export async function onCreateDevServer(
+  { reporter, app }: CreateDevServerArgs,
+  {
+    path: functionsDirectoryPath = DEFAULT_FUNCTIONS_DIRECTORY_PATH,
+  }: PluginOptions
+): Promise<void> {
+  const functionsGlob = `**/*.{js,ts}`
+  const functionsDirectory = path.resolve(
+    process.cwd(),
+    functionsDirectoryPath as string
+  )
+  const files = await glob(functionsGlob, { cwd: functionsDirectory })
+
+  reporter.verbose(`Attaching functions to development server`)
+
+  const knownFunctions = new Map(
+    files.map(file => [
+      urlResolve(path.parse(file).dir, path.parse(file).name),
+      file,
+    ])
+  )
+
+  app.use(
+    `/api/:functionName`,
+    multer().none(),
+    express.urlencoded({ extended: true }),
+    express.text(),
+    express.json(),
+    express.raw(),
+    (req, res, next) => {
+      const { functionName } = req.params
+
+      if (knownFunctions.has(functionName)) {
+        const activity = reporter.activityTimer(
+          `Executing function ${functionName}`
+        )
+        activity.start()
+        const compiledFunctionsDir = path.join(
+          process.cwd(),
+          `.cache`,
+          `functions`
+        )
+        const funcNameToJs = knownFunctions.get(functionName) as string
+
+        try {
+          const fn = require(path.join(compiledFunctionsDir, funcNameToJs))
+
+          const fnToExecute = (fn && fn.default) || fn
+
+          fnToExecute(req, res)
+        } catch (e) {
+          reporter.error(e)
+        }
+        activity.end()
+      } else {
+        next()
+      }
+    }
+  )
+}

packages/gatsby-plugin-functions/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}

packages/gatsby/package.json

@@ -88,6 +88,7 @@
     "gatsby-react-router-scroll": "^4.2.0-next.0",
     "gatsby-telemetry": "^2.2.0-next.0",
     "glob": "^7.1.6",
+    "gatsby-plugin-functions": "^0.1.0-0",
     "got": "8.3.2",
     "graphql": "^15.4.0",
     "graphql-compose": "~7.25.0",

packages/gatsby/src/bootstrap/load-plugins/load.ts

@@ -240,6 +240,19 @@ export function loadPlugins(
     )
   })
 
+  // Gatsby Functions
+
+  if (process.env.GATSBY_EXPERIMENT_FUNCTIONS) {
+    plugins.push(
+      processPlugin({
+        resolve: require.resolve(`gatsby-plugin-functions`),
+        options: {
+          path: slash(path.join(process.cwd(), `src/api`)),
+        },
+      })
+    )
+  }
+
   // TypeScript support by default! use the user-provided one if it exists
   const typescriptPlugin = (config.plugins || []).find(
     plugin => plugin.resolve === `gatsby-plugin-typescript`

tsconfig.json

@@ -12,6 +12,7 @@
     "strictFunctionTypes": true,
     "strictPropertyInitialization": true,
     "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "jsx": "preserve",