Merge branch 'master' into fix-output-pixel-densities

CODEOWNERS

@@ -0,0 +1 @@
+packages/gatsby/src/utils/source-nodes-api-runner.ts @gatsbyjs/integrations-collaboration

packages/gatsby-plugin-remove-trailing-slashes/README.md → deprecated-packages/gatsby-plugin-remove-trailing-slashes/README.md

@@ -1,6 +1,6 @@
 # gatsby-plugin-remove-trailing-slashes
 
-**Please Note:** This plugin will soon be **deprecated**, please use Gatsby's `trailingSlash` option. Read the [documentation](https://gatsby.dev/trailing-slash) to learn more.
+**Please Note:** This plugin is **deprecated**, please use Gatsby's `trailingSlash` option. Read the [documentation](https://gatsby.dev/trailing-slash) to learn more.
 
 This plugin removes trailing slashes from your project's paths. For
 example, `yoursite.com/about/` becomes `yoursite.com/about`.

docs/docs/debugging-html-builds.md

@@ -50,7 +50,7 @@ const isBrowser = typeof window !== "undefined"
 export default function MyComponent() {
   let loggedIn = false
   if (isBrowser) {
-    window.localstorage.getItem("isLoggedIn") === "true"
+    window.localStorage.getItem("isLoggedIn") === "true"
   }
 
   return <div>Am I logged in? {loggedIn}</div>

docs/docs/how-to/styling/using-local-fonts.md

@@ -12,7 +12,7 @@ This guide uses the Gatsby [default starter](https://github.com/gatsbyjs/gatsby-
 
 Get started by using local fonts by adding them to your project. Copy the font file into your Gatsby project, for example, `src/fonts/fontname.woff2`.
 
-**NOTE:** It’s recommended to limit custom font usage to only the essential needed for performance.
+**NOTE:** For performance reasons, it’s recommended to limit the number of custom fonts added.
 
 The Gatsby default starter project adds [browser safe font](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Default_fonts) styling in the `layout.css` file.
 

docs/docs/how-to/testing/end-to-end-testing.md

@@ -13,15 +13,20 @@ To run Gatsby's development server and Cypress at the same time, you'll use the
 npm install --save-dev cypress start-server-and-test
 ```
 
-We also want the URLs used by `cy.visit()` or `cy.request()` to be prefixed, hence you have to create the file `cypress.json` at the root of your project with the following content:
+You need to create a config file for Cypress at the root of the project called `cypress.config.js`. You can use it to preface the URLs used by `cy.visit()` or `cy.request` as well as set the folder the tests are in by adding the following:
 
-```json:title=cypress.json
-{
-  "baseUrl": "http://localhost:8000/"
-}
+```js:title=cypress.config.js
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:8000',
+    specPattern: "cypress/e2e"
+  }
+})
 ```
 
-Last but not least you add additional scripts to your `package.json` to run Cypress:
+You also need to add additional scripts to your `package.json` to run Cypress:
 
 ```json:title=package.json
 {
@@ -37,7 +42,7 @@ Last but not least you add additional scripts to your `package.json` to run Cypr
 
 Type `npm run test:e2e` in your command line and see Cypress running for the first time. A folder named `cypress` will be created at the root of your project and a new application window will pop up. [Cypress' getting started guide](https://docs.cypress.io/guides/getting-started/writing-your-first-test.html#) is a good start to learn how to write tests!
 
-_Important note_: If you are running Gatsby with the `--https` flag, whether using your own or automatically generated certificates, you will also need to tell `start-server-and-test` to disable HTTPS certificate checks (otherwise it will wait forever and never actually launch Cypress. You do this by passing in an environmental variable: `START_SERVER_AND_TEST_INSECURE=1`. [start-server-and-test docs](https://github.com/bahmutov/start-server-and-test#disable-https-certificate-checks)).
+**Please note:** If you are running Gatsby with the `--https` flag, whether using your own or automatically generated certificates, you will also need to tell `start-server-and-test` to disable HTTPS certificate checks (otherwise it will wait forever and never actually launch Cypress. You do this by passing in an environmental variable: `START_SERVER_AND_TEST_INSECURE=1`. [start-server-and-test docs](https://github.com/bahmutov/start-server-and-test#disable-https-certificate-checks)).
 
 This means your `test:e2e` script would look like this:
 
@@ -75,26 +80,16 @@ To use cypress-axe, you have to install the `cypress-axe` and [axe-core](https:/
 npm install --save-dev cypress-axe axe-core @testing-library/cypress
 ```
 
-Then you add the `cypress-axe` and `@testing-library/cypress` commands in `cypress/support/index.js`:
+Then you add the `cypress-axe` and `@testing-library/cypress` commands in `cypress/support/e2e.js`:
 
-```js:title=cypress/support/index.js
-import "./commands"
+```js:title=cypress/support/e2e.js
 //highlight-start
 import "cypress-axe"
 import "@testing-library/cypress/add-commands"
 //highlight-end
 ```
 
-Cypress will look for tests inside the `cypress/integration` folder, but you can change the default test folder if you want. Because you're writing end-to-end tests, create a new folder called `cypress/e2e`, and use it as your `integrationFolder` in your `cypress.json`:
-
-```json:title=cypress.json
-{
-  "baseUrl": "http://localhost:8000/",
-  "integrationFolder": "cypress/e2e" // highlight-line
-}
-```
-
-Create a new file inside `cypress/e2e` folder and name it `accessibility.test.js`.
+Create a folder inside the cypress folder and a new file inside `cypress/e2e` folder and name it `accessibility.test.js`.
 
 You'll use the `beforeEach` hook to run some commands before each test. This is what they do:
 
@@ -109,7 +104,8 @@ Finally, inside the first test, you'll use the `checkA11y` command from `cypress
 
 describe("Accessibility tests", () => {
   beforeEach(() => {
-    cy.visit("/").get("main").injectAxe()
+      cy.visit("/").get("main")
+      cy.injectAxe()
   })
   it("Has no detectable accessibility violations on load", () => {
     cy.checkA11y()
@@ -132,7 +128,8 @@ The following test is for the [gatsby-default-starter](https://github.com/gatsby
 
 describe("Accessibility tests", () => {
   beforeEach(() => {
-    cy.visit("/").get("main").injectAxe()
+      cy.visit("/").get("main")
+      cy.injectAxe()
   })
   it("Has no detectable accessibility violations on load", () => {
     cy.checkA11y()
@@ -156,11 +153,13 @@ You'll now write another test for the `gatsby-default-starter` homepage. In this
 
 describe("Accessibility tests", () => {
   beforeEach(() => {
-    cy.visit("/").get("main").injectAxe()
+      cy.visit("/").get("main")
+      cy.injectAxe()
   })
   it("Has no detectable accessibility violations on load", () => {
     cy.checkA11y()
   })
+
   it("Navigates to page 2 and checks for accessibility violations", () => {
     cy.findByText(/go to page 2/i)
       .click()

docs/docs/how-to/testing/unit-testing.md

@@ -237,7 +237,7 @@ If you are using TypeScript, you need to install typings packages and make
 two changes to your config.
 
 ```shell
-npm install --save-dev @types/jest @types/react-test-renderer
+npm install --save-dev @types/jest @types/react-test-renderer @babel/preset-typescript
 ```
 
 Update the transform in `jest.config.js` to run `jest-preprocess` on files in your project's root directory.

docs/docs/reference/built-in-components/gatsby-head.md

@@ -88,6 +88,7 @@ You'll need to be aware of these things when using Gatsby Head:
 - The `Head` function needs to return valid JSX.
 - Valid tags inside the `Head` function are: `link`, `meta`, `style`, `title`, `base`, `script`, and `noscript`.
 - Data block `<script>` tags such as `<script type="application/ld+json">` can go in the `Head` function, but dynamic scripts are better loaded with the [Gatsby Script Component](/docs/reference/built-in-components/gatsby-script/) in your pages or components.
+- Using the Head API and [react-helmet](https://github.com/nfl/react-helmet) in the same page is not supported as it can generate unexpected results.
 
 ## Properties
 

docs/docs/tutorial/part-1/index.mdx

@@ -309,7 +309,7 @@ To connect your code on GitHub to your Gatsby Cloud account, do the following:
 
    ![The new fields. "Base Branch" is set to "main", "Base Directory" is set to "/", and "Site Name" is set to "my-first-gatsby-site-main".](./05-add-site-details.png)
 
-1. Gatsby Cloud will ask you if you want to add any integrations to your site. For future projects, this might be useful if you want to use a CMS. Gatsby Cloud will also ask if you want to add any environment variables. Again, this may useful for future projects, but for now, scroll past and click the **"Build Site"** button.
+1. Gatsby Cloud will ask you if you want to add any integrations to your site. For future projects, this might be useful if you want to use a CMS. Gatsby Cloud will also ask if you want to add any environment variables. Again, this may be useful for future projects, but for now, scroll past and click the **"Build Site"** button.
 
    ![The "Integrations" tab of the "Add a site" screen.](./06-integrations-and-environment-variables.png)
 

docs/tutorial/remark-plugin-tutorial.md

@@ -189,7 +189,7 @@ However, if the sub-plugin is published and installed via npm, simply refer to i
 
 When modifying nodes, you'll want to walk the tree and then implement new functionality on specific nodes.
 
-A node module to help with is [unist-util-visit](https://github.com/syntax-tree/unist-util-visit), a walker for `unist` nodes. For reference, Unist (Unified Syntax Tree) is a standard for Markdown syntax trees and parsers that include well known parsers in the Gatsby world like Remark and MDX.
+A node module to help with this is [unist-util-visit](https://github.com/syntax-tree/unist-util-visit), a walker for `unist` nodes. For reference, Unist (Unified Syntax Tree) is a standard for Markdown syntax trees and parsers that include well known parsers in the Gatsby world like Remark and MDX.
 
 As an example from `unist-util-visit`'s README file, it allows for an interface to visit particular nodes based on a particular type:
 
@@ -208,6 +208,14 @@ function visitor(node) {
 
 Here, it finds all text nodes and will `console.log` the nodes. The second argument can be replaced with any type described in Unist's [Markdown AST (mdast) specification](https://github.com/syntax-tree/mdast#nodes) including types such as `paragraph`, `blockquote`, `link`, `image` or in our usecase, `heading`.
 
+To be able to use `unist-util-visit`, install it into your plugin:
+
+```shell
+npm install unist-util-visit@^2
+```
+
+**Please note**: You're installing v2 of `unist-util-visit` as newer major versions are ESM and Gatsby doesn't fully support that yet.
+
 With this technique in mind, you can similarly traverse the AST from your plugin and add additional functionality, like so:
 
 ```js:title=plugins/gatsby-remark-purple-headers/index.js

e2e-tests/path-prefix/cypress/integration/navigate.js

@@ -58,6 +58,16 @@ describe(`navigate`, () => {
         .location(`pathname`)
         .should(`eq`, `${pathPrefix}/subdirectory/page-2`)
     })
+
+    it(`can navigate to SSR page`, () => {
+      cy.getTestElement(`page-ssr-button-link`)
+        .click()
+        .waitForRouteChange()
+        .location(`pathname`)
+        .should(`eq`, withTrailingSlash(`${pathPrefix}/ssr`))
+
+      cy.getTestElement(`server-data`).contains(`foo`)
+    })
   })
 
   it(`can navigate to 404`, () => {

e2e-tests/path-prefix/cypress/integration/path-prefix.js

@@ -3,39 +3,43 @@ const { pathPrefix } = require(`../../gatsby-config`)
 const withTrailingSlash = url => `${url}/`
 
 describe(`Production pathPrefix`, () => {
-  beforeEach(() => {
-    cy.visit(`/`).waitForRouteChange()
-  })
+  describe(`navigation`, () => {
+    beforeEach(() => {
+      cy.visit(`/`).waitForRouteChange()
+    })
 
-  it(`returns 200 on base route`, () => {
-    cy.location(`pathname`).should(`eq`, withTrailingSlash(pathPrefix))
-  })
+    it(`returns 200 on base route`, () => {
+      cy.location(`pathname`).should(`eq`, withTrailingSlash(pathPrefix))
+    })
 
-  it(`renders static image`, () => {
-    cy.getTestElement(`static-image`)
-      .should(`have.attr`, `srcset`)
-      .and(srcset => {
-        srcset.split(/\s*,\s*/).forEach(part => {
-          expect(part).to.contain(`/blog`)
+    it(`renders static image`, () => {
+      cy.getTestElement(`static-image`)
+        .should(`have.attr`, `srcset`)
+        .and(srcset => {
+          srcset.split(/\s*,\s*/).forEach(part => {
+            expect(part).to.contain(`/blog`)
+          })
         })
-      })
-  })
+    })
 
-  it(`renders dynamic image`, () => {
-    cy.getTestElement(`gatsby-image`)
-      .should(`have.attr`, `srcset`)
-      .and(srcset => {
-        srcset.split(/\s*,\s*/).forEach(part => {
-          expect(part).to.contain(`/blog`)
+    it(`renders dynamic image`, () => {
+      cy.getTestElement(`gatsby-image`)
+        .should(`have.attr`, `srcset`)
+        .and(srcset => {
+          srcset.split(/\s*,\s*/).forEach(part => {
+            expect(part).to.contain(`/blog`)
+          })
         })
-      })
-  })
+    })
 
-  describe(`navigation`, () => {
     it(`prefixes link with /blog`, () => {
       cy.getTestElement(`page-2-link`)
         .should(`have.attr`, `href`)
         .and(`include`, `/blog`)
+
+      cy.getTestElement(`page-ssr-link`)
+        .should(`have.attr`, `href`)
+        .and(`include`, `/blog`)
     })
 
     it(`can navigate to secondary page`, () => {
@@ -73,5 +77,24 @@ describe(`Production pathPrefix`, () => {
         withTrailingSlash(`${pathPrefix}/blogtest`)
       )
     })
+
+    it(`can navigate to ssr page`, () => {
+      cy.getTestElement(`page-ssr-link`).click()
+
+      cy.location(`pathname`).should(
+        `eq`,
+        withTrailingSlash(`${pathPrefix}/ssr`)
+      )
+
+      cy.getTestElement(`server-data`).contains(`foo`)
+    })
+  })
+
+  it(`can visit ssr page`, () => {
+    cy.visit(`/ssr/`).waitForRouteChange()
+
+    cy.location(`pathname`).should(`eq`, withTrailingSlash(`${pathPrefix}/ssr`))
+
+    cy.getTestElement(`server-data`).contains(`foo`)
   })
 })

e2e-tests/path-prefix/package.json

@@ -15,6 +15,7 @@
     "gatsby-plugin-sitemap": "next",
     "gatsby-source-filesystem": "next",
     "gatsby-transformer-sharp": "next",
+    "http-proxy": "^1.18.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^5.2.0"
@@ -25,11 +26,11 @@
   "license": "MIT",
   "scripts": {
     "prebuild": "del-cli -f assets && make-dir assets/blog",
-    "build": "gatsby build --prefix-paths",
+    "build": "cross-env CYPRESS_SUPPORT=y gatsby build --prefix-paths",
     "postbuild": "cpy --cwd=./public --parents '**/*' '../assets/blog'",
     "develop": "gatsby develop",
     "format": "prettier --write '**/*.js'",
-    "test": "cross-env CYPRESS_SUPPORT=y npm run build && npm run start-server-and-test",
+    "test": "npm run build && npm run start-server-and-test",
     "start-server-and-test": "start-server-and-test serve \"http://localhost:9000/blog/|http://localhost:9001/blog/\" cy:run",
     "serve": "npm-run-all --parallel serve:*",
     "serve:site": "gatsby serve --prefix-paths",
@@ -46,11 +47,11 @@
     "make-dir-cli": "^2.0.0",
     "npm-run-all": "^4.1.5",
     "prettier": "2.0.4",
-    "serve-handler": "^6.0.0",
-    "start-server-and-test": "^1.7.1"
+    "start-server-and-test": "^1.7.1",
+    "wait-on": "^6.0.0"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/gatsbyjs/gatsby-starter-default"
   }
-}
+}

e2e-tests/path-prefix/scripts/serve.js

@@ -1,24 +1,24 @@
-const handler = require(`serve-handler`)
 const http = require(`http`)
-const path = require(`path`)
+const httpProxy = require("http-proxy")
+const waitOn = require("wait-on")
 
-const server = http.createServer((request, response) =>
-  handler(request, response, {
-    public: path.resolve(`assets`),
-    headers: [
-      {
-        source: `**/*`,
-        headers: [
-          {
-            key: `Access-Control-Allow-Origin`,
-            value: `*`,
-          },
-        ],
-      },
-    ],
-  })
-)
+waitOn(
+  {
+    resources: [`http://localhost:9000/blog/`],
+  },
+  function (err) {
+    if (err) {
+      console.error(err)
+      process.exit(1)
+    }
+
+    const proxy = httpProxy.createProxyServer()
+    const server = http.createServer((request, response) =>
+      proxy.web(request, response, { target: "http://localhost:9000" })
+    )
 
-server.listen(9001, () => {
-  console.log(`Running at http://localhost:9001`)
-})
+    server.listen(9001, () => {
+      console.log(`Assets server running at http://localhost:9001`)
+    })
+  }
+)

e2e-tests/path-prefix/src/pages/index.js

@@ -40,6 +40,15 @@ const IndexPage = ({ data }) => {
       <Link data-testid="subdir-link" to="subdirectory/page-1">
         Go to subdirectory
       </Link>
+      <Link data-testid="page-ssr-link" to="/ssr/">
+        Go to SSR page
+      </Link>
+      <button
+        data-testid="page-ssr-button-link"
+        onClick={() => navigate(`/ssr/`)}
+      >
+        Go to SSR page with navigate()
+      </button>
     </Layout>
   )
 }