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

.circleci/config.yml

@@ -285,6 +285,13 @@ jobs:
       - store_artifacts:
           path: integration-tests/images/__diff_output__
 
+  integration_tests_functions:
+    executor: node
+    steps:
+      - e2e-test:
+          test_path: integration-tests/functions
+          test_command: yarn test
+
   e2e_tests_path-prefix:
     <<: *e2e-executor
     environment:
@@ -610,6 +617,8 @@ workflows:
           <<: *e2e-test-workflow
       - integration_tests_images:
           <<: *e2e-test-workflow
+      - integration_tests_functions:
+          <<: *e2e-test-workflow
       - integration_tests_gatsby_cli:
           requires:
             - bootstrap

integration-tests/functions/.env.development

@@ -0,0 +1 @@
+pickle=word

integration-tests/functions/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+.cache/
+public

integration-tests/functions/README.md

@@ -0,0 +1,54 @@
+<p align="center">
+  <a href="https://www.gatsbyjs.com/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter">
+    <img alt="Gatsby" src="https://www.gatsbyjs.com/Gatsby-Monogram.svg" width="60" />
+  </a>
+</p>
+<h1 align="center">
+  Gatsby minimal starter
+</h1>
+
+## 🚀 Quick start
+
+1.  **Create a Gatsby site.**
+
+    Use the Gatsby CLI to create a new site, specifying the minimal starter.
+
+    ```shell
+    # create a new Gatsby site using the minimal starter
+    npm init gatsby
+    ```
+
+2.  **Start developing.**
+
+    Navigate into your new site’s directory and start it up.
+
+    ```shell
+    cd my-gatsby-site/
+    npm run develop
+    ```
+
+3.  **Open the code and start customizing!**
+
+    Your site is now running at http://localhost:8000!
+
+    Edit `src/pages/index.js` to see your site update in real-time!
+
+4.  **Learn more**
+
+    - [Documentation](https://www.gatsbyjs.com/docs/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+
+    - [Tutorials](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+
+    - [Guides](https://www.gatsbyjs.com/tutorial/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+
+    - [API Reference](https://www.gatsbyjs.com/docs/api-reference/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+
+    - [Plugin Library](https://www.gatsbyjs.com/plugins?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+
+    - [Cheat Sheet](https://www.gatsbyjs.com/docs/cheat-sheet/?utm_source=starter&utm_medium=readme&utm_campaign=minimal-starter)
+
+## 🚀 Quick start (Gatsby Cloud)
+
+Deploy this starter with one click on [Gatsby Cloud](https://www.gatsbyjs.com/cloud/):
+
+[<img src="https://www.gatsbyjs.com/deploynow.svg" alt="Deploy to Gatsby Cloud">](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/gatsbyjs/my-gatsby-site)

integration-tests/functions/__tests__/__snapshots__/functions.js.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`functions can parse different ways of sending data form data 1`] = `
+Object {
+  "a": "form-data",
+}
+`;
+
+exports[`functions can parse different ways of sending data form parameters 1`] = `
+Object {
+  "a": "form parameters",
+}
+`;
+
+exports[`functions can parse different ways of sending data json body 1`] = `
+Object {
+  "a": "json",
+}
+`;
+
+exports[`functions can parse different ways of sending data query string 1`] = `
+Object {
+  "amIReal": "true",
+}
+`;
+
+exports[`response formats returns json correctly 1`] = `
+Object {
+  "amIJSON": true,
+}
+`;
+
+exports[`response formats returns json correctly 2`] = `
+Object {
+  "access-control-allow-origin": "*",
+  "connection": "close",
+  "content-length": "16",
+  "content-type": "application/json; charset=utf-8",
+  "etag": "W/\\"10-R6td1pV+B+Xz9CJkNeaEI2kP+QY\\"",
+  "vary": "Accept-Encoding",
+  "x-powered-by": "Express",
+}
+`;
+
+exports[`response formats returns text correctly 1`] = `"I am typescript"`;
+
+exports[`response formats returns text correctly 2`] = `
+Object {
+  "access-control-allow-origin": "*",
+  "connection": "close",
+  "content-length": "15",
+  "content-type": "text/html; charset=utf-8",
+  "etag": "W/\\"f-zwggT56l/fnWBm4dI0PkA4E3i4E\\"",
+  "vary": "Accept-Encoding",
+  "x-powered-by": "Express",
+}
+`;
+
+exports[`routing secondary-level API 1`] = `"I am at a secondary-level"`;
+
+exports[`routing secondary-level API 2`] = `"I am another sub-directory function"`;
+
+exports[`routing secondary-level API with index.js 1`] = `"I am an index.js in a sub-directory!"`;
+
+exports[`routing top-level API 1`] = `"I am at the top-level"`;
+
+exports[`typescript typescript functions work 1`] = `"I am typescript"`;

integration-tests/functions/__tests__/fixtures/function-a.js

@@ -0,0 +1,3 @@
+export default function Function(req, res) {
+  res.send(`hi`)
+}

integration-tests/functions/__tests__/fixtures/test.txt

@@ -0,0 +1 @@
+hi friends

integration-tests/functions/__tests__/functions.js

@@ -0,0 +1,205 @@
+const fetch = require(`node-fetch`)
+const execa = require(`execa`)
+const fs = require(`fs-extra`)
+const path = require(`path`)
+const FormData = require("form-data")
+
+describe(`routing`, () => {
+  test(`top-level API`, async () => {
+    const result = await fetch(
+      `http://localhost:8000/api/top-level`
+    ).then(res => res.text())
+
+    expect(result).toMatchSnapshot()
+  })
+  test(`secondary-level API`, async () => {
+    const result = await fetch(
+      `http://localhost:8000/api/a-directory/function`
+    ).then(res => res.text())
+
+    expect(result).toMatchSnapshot()
+  })
+  test(`secondary-level API with index.js`, async () => {
+    const result = await fetch(
+      `http://localhost:8000/api/a-directory`
+    ).then(res => res.text())
+
+    expect(result).toMatchSnapshot()
+  })
+  test(`secondary-level API`, async () => {
+    const result = await fetch(
+      `http://localhost:8000/api/dir/function`
+    ).then(res => res.text())
+
+    expect(result).toMatchSnapshot()
+  })
+})
+
+describe(`environment variables`, () => {
+  test(`can use inside functions`, async () => {
+    const result = await fetch(
+      `http://localhost:8000/api/env-variables`
+    ).then(res => res.text())
+
+    expect(result).toEqual(`word`)
+  })
+})
+
+describe(`typescript`, () => {
+  test(`typescript functions work`, async () => {
+    const result = await fetch(
+      `http://localhost:8000/api/i-am-typescript`
+    ).then(res => res.text())
+
+    expect(result).toMatchSnapshot()
+  })
+})
+
+describe(`response formats`, () => {
+  test(`returns json correctly`, async () => {
+    const res = await fetch(`http://localhost:8000/api/i-am-json`)
+    const result = await res.json()
+
+    const { date, ...headers } = Object.fromEntries(res.headers)
+    expect(result).toMatchSnapshot()
+    expect(headers).toMatchSnapshot()
+  })
+  test(`returns text correctly`, async () => {
+    const res = await fetch(`http://localhost:8000/api/i-am-typescript`)
+    const result = await res.text()
+
+    const { date, ...headers } = Object.fromEntries(res.headers)
+    expect(result).toMatchSnapshot()
+    expect(headers).toMatchSnapshot()
+  })
+})
+
+describe(`functions can send custom statuses`, () => {
+  test(`can return 200 status`, async () => {
+    const res = await fetch(`http://localhost:8000/api/status`)
+
+    expect(res.status).toEqual(200)
+  })
+
+  test(`can return 404 status`, async () => {
+    const res = await fetch(`http://localhost:8000/api/status?code=404`)
+
+    expect(res.status).toEqual(404)
+  })
+
+  test(`can return 500 status`, async () => {
+    const res = await fetch(`http://localhost:8000/api/status?code=500`)
+
+    expect(res.status).toEqual(500)
+  })
+})
+
+describe(`functions can parse different ways of sending data`, () => {
+  test(`query string`, async () => {
+    const result = await fetch(
+      `http://localhost:8000/api/parser?amIReal=true`
+    ).then(res => res.json())
+
+    expect(result).toMatchSnapshot()
+  })
+
+  test(`form parameters`, async () => {
+    const { URLSearchParams } = require("url")
+    const params = new URLSearchParams()
+    params.append("a", `form parameters`)
+    const result = await fetch(`http://localhost:8000/api/parser`, {
+      method: `POST`,
+      body: params,
+    }).then(res => res.json())
+
+    expect(result).toMatchSnapshot()
+  })
+
+  test(`form data`, async () => {
+    const FormData = require("form-data")
+
+    const form = new FormData()
+    form.append("a", `form-data`)
+    const result = await fetch(`http://localhost:8000/api/parser`, {
+      method: `POST`,
+      body: form,
+    }).then(res => res.json())
+
+    expect(result).toMatchSnapshot()
+  })
+
+  test(`json body`, async () => {
+    const body = { a: `json` }
+    const result = await fetch(`http://localhost:8000/api/parser`, {
+      method: `POST`,
+      body: JSON.stringify(body),
+      headers: { "Content-Type": "application/json" },
+    }).then(res => res.json())
+
+    expect(result).toMatchSnapshot()
+  })
+
+  // test(`file in multipart/form`, async () => {
+  // const { readFileSync } = require("fs")
+
+  // const file = readFileSync(path.join(__dirname, "./fixtures/test.txt"))
+
+  // const form = new FormData()
+  // form.append("file", file)
+  // const result = await fetch(`http://localhost:8000/api/parser`, {
+  // method: `POST`,
+  // body: form,
+  // }).then(res => res.json())
+
+  // console.log({ result })
+
+  // expect(result).toMatchSnapshot()
+  // })
+
+  // test(`stream a file`, async () => {
+  // const { createReadStream } = require("fs")
+
+  // const stream = createReadStream(path.join(__dirname, "./fixtures/test.txt"))
+  // const res = await fetch(`http://localhost:8000/api/parser`, {
+  // method: `POST`,
+  // body: stream,
+  // })
+
+  // console.log(res)
+
+  // expect(result).toMatchSnapshot()
+  // })
+})
+
+// TODO figure out why this gets into endless loops
+// describe.only(`hot reloading`, () => {
+// const fixturesDir = path.join(__dirname, `fixtures`)
+// const apiDir = path.join(__dirname, `../src/api`)
+// beforeAll(() => {
+// try {
+// fs.unlinkSync(path.join(apiDir, `function-a.js`))
+// } catch (e) {
+// // Ignore as this should mostly error with file not found.
+// // We delete to be sure it's not there.
+// }
+// })
+// afterAll(() => {
+// fs.unlinkSync(path.join(apiDir, `function-a.js`))
+// })
+
+// test(`new function`, cb => {
+// fs.copySync(
+// path.join(fixturesDir, `function-a.js`),
+// path.join(apiDir, `function-a.js`)
+// )
+// setTimeout(async () => {
+// const result = await fetch(
+// `http://localhost:8000/api/function-a`
+// ).then(res => res.text())
+
+// console.log(result)
+// expect(result).toMatchSnapshot()
+// cb()
+// }, 400)
+// })
+// })

integration-tests/functions/gatsby-config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  flags: {
+    FUNCTIONS: true,
+  },
+  siteMetadata: {
+    title: "functions",
+  },
+  plugins: [],
+}

integration-tests/functions/jest.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  testPathIgnorePatterns: [
+    `/node_modules/`,
+    `__tests__/fixtures`,
+    `.cache`,
+    `src/test`,
+    `src/api`,
+  ],
+  watchPathIgnorePatterns: ["src/api", ".cache"],
+  transform: {
+    "^.+\\.[jt]sx?$": `<rootDir>../../jest-transformer.js`,
+  },
+}