gatsbyjs · Jun 2, 2022 · Jun 2, 2022 · Jun 2, 2022 · Jun 3, 2022 · Jun 3, 2022
Showing 395 changed files with 10,548 additions and 8,599 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -429,25 +429,13 @@ jobs:
 
   mdx_e2e_tests:
     <<: *e2e-executor
-    environment:
-      <<: *e2e-executor-env
-      CYPRESS_PROJECT_ID: spbj28
-      CYPRESS_RECORD_KEY: af30ea46-121f-4fb7-97dd-f17ec224402e
     steps:
       - e2e-test:
           test_path: e2e-tests/mdx
-          test_command: yarn test
-
-  e2e_tests_gatsby-static-image:
-    <<: *e2e-executor
-    environment:
-      <<: *e2e-executor-env
-      CYPRESS_PROJECT_ID: zstawi
-      CYPRESS_RECORD_KEY: 389326a6-c0d2-4215-bc5e-3be29483ed13
-    steps:
+          test_command: CYPRESS_PROJECT_ID=spbj28 CYPRESS_RECORD_KEY=af30ea46-121f-4fb7-97dd-f17ec224402e yarn test
       - e2e-test:
-          test_path: e2e-tests/gatsby-static-image
-          test_command: yarn test
+          test_path: e2e-tests/mdx-less-babel
+          test_command: CYPRESS_PROJECT_ID=xo139a CYPRESS_RECORD_KEY=74d485b5-3ba6-40e1-a7d4-e63c0a8d2a4d yarn test
 
   e2e_tests_visual-regression:
     <<: *e2e-executor
@@ -526,7 +514,6 @@ jobs:
       - run: git config --global user.name "GatsbyJS Bot"
       - run: git config --global user.email "core-team@gatsbyjs.com"
       - run: node scripts/gatsby-changelog-generator/update-and-open-pr.js
-      - run: yarn format:other
 
   windows_unit_tests:
     parallelism: 4
@@ -645,8 +632,6 @@ workflows:
           <<: *e2e-test-workflow
       - e2e_tests_path-prefix:
           <<: *e2e-test-workflow
-      - e2e_tests_gatsby-static-image:
-          <<: *e2e-test-workflow
       - e2e_tests_visual-regression:
           <<: *e2e-test-workflow
       - e2e_tests_contentful:

diff --git a/.jestSetup.js b/.jestSetup.js
@@ -1,4 +1,5 @@
 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/how-to/adding-common-features/adding-analytics.md b/docs/docs/how-to/adding-common-features/adding-analytics.md
@@ -14,6 +14,10 @@ Gatsby offers a plugin for most common services, making first-class integration
 
 When utilizing marketing analytics tools, one key tradeoff is that marketing analytics tools are often the culprit for poor website performance. As a result, tools that make it easier for marketers to add and remove analytics (via Google Tag Manager), can also make it easier for them to harm site performance without noticing.
 
+## Adding scripts performantly
+
+Gatsby has a built-in [Gatsby Script Component](/docs/reference/built-in-components/gatsby-script/) that aids in loading scripts performantly. It offers a convenient way to declare different loading strategies, and a default loading strategy that gives Gatsby users strong performance out of the box.
+
 ## Guides to common analytics tools
 
 - [Google Analytics](/plugins/gatsby-plugin-google-analytics/)

diff --git a/docs/docs/how-to/custom-configuration/typescript.md b/docs/docs/how-to/custom-configuration/typescript.md
@@ -292,31 +292,6 @@ Parcel is used for the compilation and it currently has [limitations on TypeScri
 - No support for `baseUrl` or `paths` inside `tsconfig.json`
 - It implicitly enables the [`isolatedModules`](https://www.typescriptlang.org/tsconfig#isolatedModules) option by default
 
-### `__dirname`
-
-You can't use `__dirname` and `__filename` in your files. You'll need to replace these instances with a `path.resolve` call. Example diff for a `gatsby-config` file:
-
-```diff
-+ import path from "path"
-
-const config = {
-  plugins: [
-    {
-      resolve: `gatsby-source-filesystem`,
-      options: {
-        name: `your-name`,
-+       path: path.resolve(`some/folder`),
--       path: `${__dirname}/some/folder`,
-      },
-    },
-  ]
-}
-
-export default config
-```
-
-Progress on this is tracked in [Parcel #7611](https://github.com/parcel-bundler/parcel/issues/7611).
-
 ### `require.resolve`
 
 You can't use `require.resolve` in your files. You'll need to replace these instances with a `path.resolve` call. Example diff for a `gatsby-node` file:

diff --git a/docs/docs/how-to/rendering-options/using-deferred-static-generation.md b/docs/docs/how-to/rendering-options/using-deferred-static-generation.md
@@ -133,7 +133,7 @@ The `gatsby-node.js` file:
 ```js:title=gatsby-node.js
 const blogPostTemplate = require.resolve(`./src/templates/blog-post.js`)
 
-export.createPages = async ({ graphql, actions, reporter }) => {
+exports.createPages = async ({ graphql, actions, reporter }) => {
   const { createPage } = actions
 
   const result = await graphql(`

diff --git a/docs/docs/how-to/testing/testing-react-components.md b/docs/docs/how-to/testing/testing-react-components.md
@@ -18,6 +18,12 @@ Install the library as one of your project's `devDependencies`. Optionally you m
 npm install --save-dev @testing-library/react @testing-library/jest-dom
 ```
 
+If you are using Jest 28, you also need to install `jest-environment-jsdom`:
+
+```shell
+npm install --save-dev jest-environment-jsdom
+```
+
 Create the file `setup-test-env.js` at the root of your project. Insert this code into it:
 
 ```js:title=setup-test-env.js

diff --git a/docs/docs/reference/built-in-components/gatsby-script.md b/docs/docs/reference/built-in-components/gatsby-script.md
@@ -1,5 +1,8 @@
 ---
 title: Gatsby Script API
+examples:
+  - label: Using Gatsby Script
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-gatsby-script"
 ---
 
 > Support for the Gatsby Script API was added in `gatsby@4.15.0`.
@@ -133,17 +136,19 @@ The `idle` strategy is ideal for cases where you want to ensure a script loads i
 
 The `off-main-thread` strategy, unlike `post-hydrate` and `idle`, loads your script in a [web worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) via [Partytown](https://partytown.builder.io).
 
-This means that the burden of evaluation of your script is no longer the conern of the main thread, freeing it up to take care of other crucial tasks.
+This means that the burden of evaluation of your script is no longer the concern of the main thread, freeing it up to take care of other crucial tasks.
+
+> Note - Due to Partytown's status as **beta** software, the `off-main-thread` strategy is considered **experimental**. It is subject to certain [limitations](#limitations) and may require more configuration than other loading strategies depending on your use case.
 
 Here is an example configuring the `<Script>` component with the `off-main-thread` strategy to load [Google Analytics](https://analytics.google.com/analytics/web/):
 
 ```jsx
 import { Script } from "gatsby"
 
-// `process.env.GTM` is your Google Analytics 4 identifier defined in your `.env.production` and `.env.development` files
+// `process.env.GTAG` is your Google Analytics 4 identifier defined in your `.env.production` and `.env.development` files
 
 <Script
-  src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GTM}`}
+  src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GTAG}`}
   strategy="off-main-thread"
   forward={[`gtag`]}
 />
@@ -152,7 +157,7 @@ import { Script } from "gatsby"
     window.dataLayer = window.dataLayer || []
     window.gtag = function gtag() { window.dataLayer.push(arguments) }
     gtag('js', new Date())
-    gtag('config', ${process.env.GTM}, { send_page_view: false })
+    gtag('config', ${process.env.GTAG}, { send_page_view: false })
   `}
 </Script>
 ```
@@ -163,7 +168,7 @@ Gatsby will collect all `off-main-thread` scripts on a page, and automatically m
 
 ```jsx
 <Script
-  src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GTM}`}
+  src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GTAG}`}
   strategy="off-main-thread"
   // highlight-next-line
   forward={[`gtag`]}
@@ -195,7 +200,7 @@ module.exports = {
   },
   // highlight-start
   partytownProxiedURLs: [
-    `https://www.googletagmanager.com/gtag/js?id=${process.env.GTM}`
+    `https://www.googletagmanager.com/gtag/js?id=${process.env.GTAG}`
   ],
   // highlight-end
 }
@@ -205,18 +210,108 @@ This works out of the box when running your site via `gatsby develop`, `gatsby s
 
 Hosting on other providers requires support for Gatsby's [`createRedirect`](/docs/reference/config-files/actions/) action to rewrite requests from `/__third-party-proxy?url=${YOUR_URL}` to `YOUR_URL` with a 200 status code. You may need to check with your hosting provider to see if this is supported.
 
+#### Resolving URLs
+
+You can leverage Partytown's [vanilla config](https://partytown.builder.io/configuration#vanilla-config) to handle Partytown-specific behavior in your `off-main-thread` scripts. One such option is `resolveUrl`, which allows you to modify URLs handled by Partytown.
+
+One example of a use case for `resolveUrl` is when using tag manager scripts such as [Google Tag Manager](https://tagmanager.google.com). These scripts are challenging to use with Partytown since they contain _other_ scripts that make _other_ requests that may or may not need to be proxied depending on the CORS setting. In this scenario you can use `resolveUrl` to handle those child script URLs.
+
+Here's an example using [Google Tag Manager](https://tagmanager.google.com) to load [Google Analytics](http://analytics.google.com) (Universal Analytics in this case):
+
+Note - This assumes you have [set up Google Tag Manager to use Universal Analytics](https://support.google.com/tagmanager/answer/6107124?hl=en) in the Google Tag Manager web application.
+
+First you load your Google Tag Manager (GTM) script and send an initialization event:
+
+```jsx
+import { Script } from "gatsby"
+
+// `process.env.GTM` is your Google Tag Manager identifier defined in your `.env.production` and `.env.development` files
+
+<Script
+  // highlight-next-line
+  src={`https://www.googletagmanager.com/gtm.js?id=${process.env.GTM}`}
+  strategy="off-main-thread"
+  // highlight-next-line
+  forward={[`dataLayer.push`]}
+/>
+<Script id="gtm-init" strategy="off-main-thread">
+  {`
+    window.dataLayer = window.dataLayer || []
+    window.dataLayer.push({ 'gtm.start': new Date().getTime(), 'event': 'gtm.js' })
+  `}
+</Script>
+```
+
+Then you define `resolveUrl` in Partytown's vanilla config to handle the Google Analytics script loaded by Google Tag Manager:
+
+```jsx:title=gatsby-ssr.js
+import React from "react"
+
+export const onRenderBody = ({ setHeadComponents }) => {
+   setHeadComponents([
+     <script
+       key="partytown-vanilla-config"
+       dangerouslySetInnerHTML={{
+         __html: `partytown = {
+           resolveUrl(url, location) {
+              if (url.hostname.includes('google-analytics')) {
+                // Use a secure connection
+                if (url?.protocol === 'http:') {
+                  url = new URL(url.href.replace('http', 'https'))
+                }
+
+                // Point to our proxied URL
+                const proxyUrl = new URL(location.origin + '/__third-party-proxy')
+                proxyUrl.searchParams.append('url', url)
+
+                return proxyUrl
+              }
+
+              return url
+           }
+         }`,
+       }}
+     />,
+   ])
+}
+```
+
+Lastly, you need to add the Google Analytics URL to `partytownProxiedURLs` so that Gatsby knows the URL is safe to proxy:
+
+```js:title=gatsby-config.js
+import dotenv from "dotenv"
+
+dotenv.config({
+  path: `.env.${process.env.NODE_ENV}`,
+})
+
+module.exports = {
+  siteMetadata: {
+    title: `Gatsby`,
+  },
+  partytownProxiedURLs: [
+    `https://www.googletagmanager.com/gtm.js?id=${process.env.GTM}`,
+    // highlight-next-line
+    `https://www.google-analytics.com/analytics.js`,
+  ]
+}
+```
+
+At this point both your Google Tag Manager and Google Analytics scripts should load successfully in your site.
+
 #### Debugging
 
-You can leverage Partytown's [vanilla config](https://partytown.builder.io/configuration#vanilla-config) to enable debug mode for your off-main-thread scripts:
+You can also leverage Partytown's [vanilla config](https://partytown.builder.io/configuration#vanilla-config) to enable debug mode for your off-main-thread scripts:
 
 ```jsx:title=gatsby-ssr.js
 import React from "react"
 
 export const onRenderBody = ({ setHeadComponents }) => {
   setHeadComponents([
     <script
-      key="test"
+      key="partytown-vanilla-config"
       dangerouslySetInnerHTML={{
+        // highlight-next-line
         __html: `partytown = { debug: true }`,
       }}
     />,
@@ -226,8 +321,6 @@ export const onRenderBody = ({ setHeadComponents }) => {
 
 You may need to adjust your dev tools to the verbose log level in order to see the extra logs in your console.
 
-It is recommended that you only make use of the `debug` property in Partytown's vanilla config to avoid unexpected behavior.
-
 #### Limitations
 
 By leveraging [Partytown](https://partytown.builder.io), scripts that use the `off-main-thread` strategy must also be aware of the [limitations mentioned in the Partytown documentation](https://partytown.builder.io/trade-offs). While the strategy can be powerful, it may not be the best solution for all scenarios.

diff --git a/docs/docs/reference/gatsby-cli.md b/docs/docs/reference/gatsby-cli.md
@@ -258,9 +258,33 @@ Which package manager would you like to use ? › - Use arrow-keys. Return to su
    npm
 ```
 
-Once you’ve made your choice, the CLI won’t ask for your preference again for any subsequent project.
+Once you’ve made your choice, the CLI won’t ask for your preference again for any subsequent project. If you want to change the preference, there are two ways to change the default package manager for your next project:
 
-If you want to change this for your next project you have to edit the config file created automatically by the CLI.
+1. [Using options command from CLI](#using-options-command-from-cli)
+1. [Editing the config file](#editing-the-config-file)
+
+### Using options command from CLI
+
+You can use the `gatsby options` command to change the default package manager.
+
+```shell
+gatsby options set [<key> <value>]
+```
+
+| Argument | Description                                                                     |
+| -------- | ------------------------------------------------------------------------------- |
+| key      | Set the package manager `gatsby new` is using. choices: `pm`, `package-manager` |
+| value    | Set the package manager as `npm` or `yarn`.                                     |
+
+To set the default package manager as `yarn` you'd run:
+
+```shell
+gatsby options set package-manager yarn
+```
+
+### Editing the config file
+
+You can also manually change the default package manager by editing the config file created automatically by the CLI.
 This file is available on your system at: `~/.config/gatsby/config.json`
 
 In it you’re going to see something like this.