Merge branch 'master' into update-notifier

gatsbyjs · Oct 13, 2022 · 97cbe17 · 97cbe17
2 parents 2837ce0 + 7ab3c74
commit 97cbe17
Show file tree

Hide file tree

Showing 770 changed files with 32,856 additions and 73,996 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -7,11 +7,15 @@ executors:
     parameters:
       image:
         type: string
-        default: "14.15.0"
+        default: "18.0.0"
+      gatsby_major:
+        type: string
+        default: "5"
     docker:
       - image: cimg/node:<< parameters.image >>
     environment:
       GATSBY_CPU_COUNT: 2
+      COMPILER_OPTIONS: GATSBY_MAJOR=<< parameters.gatsby_major >>
 
 aliases:
   e2e-executor-env: &e2e-executor-env
@@ -20,7 +24,7 @@ aliases:
 
   e2e-executor: &e2e-executor
     docker:
-      - image: cypress/browsers:node14.15.0-chrome96-ff94
+      - image: cypress/browsers:node18.6.0-chrome105-ff104
     environment:
       <<: *e2e-executor-env
 
@@ -109,27 +113,8 @@ aliases:
     requires:
       - lint
       - typecheck
-      - unit_tests_node14
-      - unit_tests_node16
       - unit_tests_node18
 
-  e2e_tests_production_runtime_alias: &e2e_tests_production_runtime_alias
-    <<: *e2e-executor
-    steps:
-      - e2e-test:
-          test_path: e2e-tests/production-runtime
-          test_command: CYPRESS_PROJECT_ID=is8aoq CYPRESS_RECORD_KEY=cb4708d2-1578-4665-9a07-c59f8db28d91 yarn test && CYPRESS_PROJECT_ID=htpvkv CYPRESS_RECORD_KEY=0d734841-c613-41d2-86e5-df0b5968f93f yarn test:offline
-
-  e2e_tests_development_runtime_alias: &e2e_tests_development_runtime_alias
-    <<: *e2e-executor
-    environment:
-      <<: *e2e-executor-env
-      CYPRESS_PROJECT_ID: s3j3qj
-      CYPRESS_RECORD_KEY: 3904ca0c-bc98-47d9-8371-b68c5e81fb9b
-    steps:
-      - e2e-test:
-          test_path: e2e-tests/development-runtime
-
 commands:
   e2e-test:
     parameters:
@@ -147,6 +132,9 @@ commands:
       react_version:
         type: string
         default: ""
+      slices:
+        type: boolean
+        default: true # allow disabling it later when setting up partial hydration tests
     steps:
       - checkout
       # In case of failure, add these steps again. Cache probably got deleted
@@ -158,6 +146,11 @@ commands:
           steps:
             - run: ./scripts/assert-changed-files.sh "<< parameters.trigger_pattern >>|<< parameters.test_path >>/*"
 
+      - when:
+          condition: << parameters.slices >>
+          steps:
+            - run: echo 'export GATSBY_SLICES="true"' >> "$BASH_ENV"
+
       - <<: *attach_to_bootstrap
       - when:
           condition:
@@ -169,7 +162,7 @@ commands:
                 command: "REACT_VERSION=<< parameters.react_version >> TEST_PATH=<< parameters.test_path >> node ./scripts/upgrade-react"
       - run:
           name: Install gatsby-dev@next
-          command: yarn global add gatsby-dev-cli@next
+          command: yarn global add gatsby-dev-cli@next --ignore-engines
       - run:
           name: Run tests (using defaults)
           command: ./scripts/e2e-test.sh "<< parameters.test_path >>" "<< parameters.test_command >>"
@@ -222,18 +215,6 @@ jobs:
       - run: yarn typecheck
       - run: yarn check-repo-fields
 
-  unit_tests_node14:
-    executor:
-      name: node
-      image: "14.15.0"
-    <<: *test_template
-
-  unit_tests_node16:
-    executor:
-      name: node
-      image: "16.15.0"
-    <<: *test_template
-
   unit_tests_node18:
     executor:
       name: node
@@ -248,9 +229,9 @@ jobs:
           command: |
             echo 'export NVM_DIR="/opt/circleci/.nvm"' >> $BASH_ENV
             echo ' [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> $BASH_ENV
-      - run: nvm install v14
-      - run: nvm alias default v14
-      - run: nvm use v14
+      - run: nvm install 18
+      - run: nvm alias default 18
+      - run: nvm use 18
       - run: npm i -g yarn@1.22.11
       - e2e-test:
           test_path: integration-tests/gatsby-source-wordpress
@@ -280,7 +261,9 @@ jobs:
           test_path: integration-tests/gatsby-pipeline
 
   integration_tests_gatsby_cli:
-    executor: node
+    executor:
+      name: node
+      image: "18.0.0"
     steps:
       - e2e-test:
           test_path: integration-tests/gatsby-cli
@@ -387,9 +370,6 @@ jobs:
           command: 'DEBUG=start-server-and-test yarn start-server-and-test "yarn develop 2>&1 | tee log.txt" :8000 "! cat log.txt | grep -E ''ERROR #|Require stack:''"'
           working_directory: /tmp/e2e-tests/gatsby-pnp
 
-  e2e_tests_development_runtime:
-    <<: *e2e_tests_development_runtime_alias
-
   e2e_tests_development_runtime_with_react_18:
     <<: *e2e-executor
     environment:
@@ -401,9 +381,6 @@ jobs:
           test_path: e2e-tests/development-runtime
           react_version: "^18.2.0"
 
-  e2e_tests_production_runtime:
-    <<: *e2e_tests_production_runtime_alias
-
   e2e_tests_production_runtime_with_react_18:
     <<: *e2e-executor
     steps:
@@ -537,11 +514,11 @@ jobs:
 
       - <<: *attach_to_bootstrap
       - run:
-          name: Install node 14.15.0 and yarn
+          name: Install node 18.0.0 and yarn
           command: |
-            nvm install 14.15.0
-            nvm alias default 14.15.0
-            nvm use 14.15.0
+            nvm install 18.0.0
+            nvm alias default 18.0.0
+            nvm use 18.0.0
             choco install yarn
       - run:
           name: Rebuild packages for windows
@@ -556,6 +533,7 @@ jobs:
             NODE_OPTIONS: --max-old-space-size=2048
             GATSBY_EXPERIMENTAL_LMDB_STORE: 1
             GENERATE_JEST_REPORT: "true"
+            COMPILER_OPTIONS: GATSBY_MAJOR=5
             JEST_JUNIT_OUTPUT_DIR: ./test-results/jest-node/
             JEST_JUNIT_OUTPUT_NAME: results.xml
       - store_test_results:
@@ -592,18 +570,6 @@ workflows:
           requires:
             - lint
             - bootstrap
-      - unit_tests_node14:
-          <<: *ignore_docs
-          requires:
-            - lint
-            - typecheck
-            - bootstrap
-      - unit_tests_node16:
-          <<: *ignore_docs
-          requires:
-            - lint
-            - typecheck
-            - bootstrap
       - unit_tests_node18:
           <<: *ignore_docs
           requires:
@@ -647,10 +613,6 @@ workflows:
           <<: *e2e-test-workflow
       - e2e_tests_trailing-slash:
           <<: *e2e-test-workflow
-      - e2e_tests_development_runtime:
-          <<: *e2e-test-workflow
-      - e2e_tests_production_runtime:
-          <<: *e2e-test-workflow
       - e2e_tests_development_runtime_with_react_18:
           <<: *e2e-test-workflow
       - e2e_tests_production_runtime_with_react_18:

diff --git a/.jestSetup.js b/.jestSetup.js
@@ -1,5 +1,2 @@
 process.env.GATSBY_RECIPES_NO_COLOR = "true"
 process.env.GATSBY_SHOULD_TRACK_IMAGE_CDN_URLS = "true"
-
-// Potrace has a dependency on giwrap which has a process.nextTick as a sideEffect which messes up with jest.
-jest.mock(`gifwrap`, () => jest.fn())
diff --git a/docs/docs/cheat-sheet.md b/docs/docs/cheat-sheet.md
@@ -104,16 +104,6 @@ Get the PDF: <a href="/gatsby-cheat-sheet.pdf" download>gatsby-cheat-sheet.pdf</
           </p>
         </td>
       </tr>
-      <tr>
-        <td>
-          <p>Quick Reference Guide</p>
-        </td>
-        <td>
-          <p>
-            <a href="https://gatsby.dev/recipes">gatsby.dev/recipes</a>
-          </p>
-        </td>
-      </tr>
       <tr>
         <td>
           <p>Adding Images</p>

diff --git a/docs/docs/conceptual/react-hydration.md b/docs/docs/conceptual/react-hydration.md
@@ -26,7 +26,7 @@ This means that the browser can "pick up" where the server left off with the con
 
 ## Transfer rendering to the React reconciler
 
-After ReactDOM hydrates the content, the [React reconciler](https://reactjs.org/docs/reconciliation.html) can take over and [diff](https://en.m.wikipedia.org/wiki/Diff) the tree of elements. It then becomes responsible for making updates in the UI based on changing state or props.
+After ReactDOM hydrates the content, the [React reconciler](https://reactjs.org/docs/reconciliation.html) can take over and [diff](https://en.wikipedia.org/wiki/Diff) the tree of elements. It then becomes responsible for making updates in the UI based on changing state or props.
 
 ## Additional resources
 

diff --git a/docs/docs/conceptual/rendering-options.md b/docs/docs/conceptual/rendering-options.md
@@ -72,7 +72,7 @@ It implies a different deployment model and requires backend infrastructure. But
 
 SSG, DSG, and client-side rendering can handle a vast majority of use cases in web development. But there is a small niche when you may still need to generate HTML on-the-fly. That's when you'll need Server-Side Rendering.
 
-Server-Side Rendering is a method of content rendering in which each web page is served to a site visitor at runtime, meaning that a portion of the build process happens on each page request. Because the content is rendering during runtime, visitors will always get the latest version of content directly from the server—though they may have to wait a few seconds for it display.
+Server-Side Rendering is a method of content rendering in which each web page is served to a site visitor at runtime, meaning that a portion of the build process happens on each page request. Because the content is rendering during runtime, visitors will always get the latest version of content directly from the server—though they may have to wait a few seconds for it to display.
 
 For example, imagine you are building a site with user reviews. You want those reviews to be immediately indexed by search engines as soon as they are posted, so client-side rendering is not an option.
 

diff --git a/docs/docs/debugging-the-build-process.md b/docs/docs/debugging-the-build-process.md
@@ -95,6 +95,10 @@ We won't go in depth here about how to debug in VS Code - for that you can check
       "request": "launch",
       "program": "${workspaceRoot}/node_modules/.bin/gatsby",
       "args": ["develop"],
+      "env": {
+        "PARCEL_WORKERS": "0",
+        "GATSBY_CPU_COUNT": "1",
+      },
       "runtimeArgs": ["--nolazy"],
       "console": "integratedTerminal"
     },
@@ -104,6 +108,10 @@ We won't go in depth here about how to debug in VS Code - for that you can check
       "request": "launch",
       "program": "${workspaceRoot}/node_modules/.bin/gatsby",
       "args": ["build"],
+      "env": {
+        "PARCEL_WORKERS": "0",
+        "GATSBY_CPU_COUNT": "1",
+      },
       "runtimeArgs": ["--nolazy"],
       "console": "integratedTerminal"
     }
@@ -126,6 +134,10 @@ We won't go in depth here about how to debug in VS Code - for that you can check
         "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby"
       },
       "args": ["develop"],
+      "env": {
+        "PARCEL_WORKERS": "0",
+        "GATSBY_CPU_COUNT": "1",
+      },
       "runtimeArgs": ["--nolazy"],
       "console": "integratedTerminal"
     },
@@ -138,6 +150,10 @@ We won't go in depth here about how to debug in VS Code - for that you can check
         "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby"
       },
       "args": ["build"],
+      "env": {
+        "PARCEL_WORKERS": "0",
+        "GATSBY_CPU_COUNT": "1",
+      },
       "runtimeArgs": ["--nolazy"],
       "console": "integratedTerminal"
     }

diff --git a/docs/docs/glossary.md b/docs/docs/glossary.md
@@ -296,6 +296,10 @@ A code library (written with [JavaScript](#javascript)) for building user interf
 
 A parser to translate [Markdown](#markdown) to other formats like [HTML](#html) or [React](#react) code.
 
+### Run Script
+
+An executable command defined in the `scripts` property of your `package.json` file. See [npm](https://docs.npmjs.com/cli/v8/using-npm/scripts) and [yarn](https://classic.yarnpkg.com/lang/en/docs/cli/run/) run script documentation for more information.
+
 ### Runtime
 
 Runtime is when a program is running (or being executable); it can refer to a few things. [Node.js](#nodejs) is a [server-side](#server-side) runtime that executes JavaScript code. [Client-side JavaScript](#client-side), on the other hand, refers to the browser runtime where traditional JavaScript code executes. Gatsby compiles your site at [build time](#build) and [rehydrates with a React runtime](#hydration) to provide a fast, interactive, and dynamic user experience.

diff --git a/docs/docs/glossary/mdx.md b/docs/docs/glossary/mdx.md
@@ -38,7 +38,7 @@ export const Figure = props => {
 Now you can import this component into your Markdown document.
 
 ```markdown
-import { Figure } from './components/Figure';
+import { Figure } from "./components/Figure"
 
 # Hello world!
 

diff --git a/docs/docs/glossary/server-side-rendering.md b/docs/docs/glossary/server-side-rendering.md
@@ -44,6 +44,6 @@ Instead of purely server-side rendering, Gatsby uses the same APIs to create sta
 
 - [Why server-side render?](/blog/2019-04-02-behind-the-scenes-what-makes-gatsby-great/#why-server-side-render) from _Behind the Scenes: What makes Gatsby Great_
 
-- [Search Engine Optimization (SEO) and Social Sharing Cards with Gatsby](/tutorial/seo-and-social-sharing-cards-tutorial/#reach-skip-nav)
+- [Adding an SEO Component](/docs/how-to/adding-common-features/adding-seo-component/)
 
 - [What is a Static Site Generator?](/docs/glossary/static-site-generator/#what-is-a-static-site-generator) from the Gatsby docs
diff --git a/docs/docs/glossary/wpgraphql.md b/docs/docs/glossary/wpgraphql.md
@@ -34,31 +34,30 @@ Then you can configure Gatsby to work with your new endpoint.
 
 ### Using WPGraphQL with Gatsby
 
+We recommend using the official [gatsby-source-wordpress](/plugins/gatsby-source-wordpress/) plugin, which sources data from the WPGraphQL plugin.
+
 You'll need to do two more things before you can use your WordPress-backed GraphQL server with Gatsby:
 
-1. install the [gatsby-source-graphql](/docs/third-party-graphql/) plugin; and
-2. update `gatsby-config.js`.
+1. Install the [gatsby-source-wordpress](/plugins/gatsby-source-wordpress/) plugin; and
+2. Update `gatsby-config.js`.
 
-Use [npm](/docs/glossary#npm) to install [gatsby-source-graphql](/docs/third-party-graphql/).
+Use [npm](/docs/glossary#npm) to install [gatsby-source-wordpress](/plugins/gatsby-source-wordpress/).
 
 ```shell
-npm install gatsby-source-graphql
+npm install gatsby-source-wordpress
 ```
 
-Then update `gatsby-config.js`. Add the plugin to your Gatsby instance. Specify the URL of the GraphQL endpoint and set other [configuration options](/plugins/gatsby-source-graphql/).
+Then update `gatsby-config.js`. Specify the URL of the WPGraphQL endpoint and set other [configuration options](/plugins/gatsby-source-wordpress/).
 
 ```javascript
 module.exports = {
   plugins: [
     {
-      resolve: "gatsby-source-graphql",
+      resolve: "gatsby-source-wordpress",
       options: {
-        // Remote schema query type. This is an arbitrary name.
-        typeName: "WPGraphQL",
-        // Field name under which it will be available. Used in your Gatsby query. This is also an arbitrary name.
-        fieldName: "wpcontent",
-        // GraphQL endpoint, relative to your WordPress home URL.
-        url: "https://example.com/blog/graphql",
+        url:
+          process.env.WPGRAPHQL_URL ||
+          `https://path-to-your-wordpress-instance.com/graphql`,
       },
     },
   ],

diff --git a/docs/docs/how-to/cloud/create-a-deploy-to-gatsby-cloud-button.md b/docs/docs/how-to/cloud/create-a-deploy-to-gatsby-cloud-button.md
@@ -0,0 +1,36 @@
+---
+title: "Create a Deploy to Gatsby Cloud Button"
+description: "Learn how to add a deploy button to your Github repository"
+---
+
+Gatsby Cloud supports Deploy Buttons which you can use to quickly create new sites from Github repositories.
+
+[![Deploy to Gatsby Cloud](https://www.gatsbyjs.com/deploynow.svg)](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/gatsbyjs/gatsby-starter-blog)
+
+At this time, only public Github repos are supported.
+
+Have a feature request for Deploy Buttons? [Suggest a feature](https://gatsby.canny.io/gatsby-cloud).
+
+### Configure a button
+
+Set the `url` parameter of the link to your public Github repo.
+
+HTML snippet:
+
+```html
+<a
+  href="https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/gatsbyjs/gatsby-starter-blog"
+  target="_blank"
+>
+  <img
+    src="https://www.gatsbyjs.com/deploynow.svg"
+    alt="Deploy to Gatsby Cloud"
+  />
+</a>
+```
+
+Markdown:
+
+```markdown
+[![Deploy to Gatsby Cloud](https://www.gatsbyjs.com/deploynow.svg)](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/gatsbyjs/gatsby-starter-blog)
+```