From 3442bb453702f41ae839c93ac14f3cd021db6dfc Mon Sep 17 00:00:00 2001 From: tyhopp Date: Fri, 8 Apr 2022 13:14:40 +0800 Subject: [PATCH 01/63] feat(gatsby-script): Package scaffolding --- packages/gatsby-script/.babelrc | 3 ++ packages/gatsby-script/.eslintrc.yaml | 4 ++ packages/gatsby-script/.gitignore | 2 + packages/gatsby-script/.npmignore | 34 ++++++++++++++ packages/gatsby-script/CHANGELOG.md | 4 ++ packages/gatsby-script/README.md | 3 ++ packages/gatsby-script/index.d.ts | 5 ++ packages/gatsby-script/package.json | 46 +++++++++++++++++++ packages/gatsby-script/src/__tests__/index.ts | 5 ++ packages/gatsby-script/src/index.tsx | 44 ++++++++++++++++++ packages/gatsby-script/tsconfig.json | 3 ++ 11 files changed, 153 insertions(+) create mode 100644 packages/gatsby-script/.babelrc create mode 100644 packages/gatsby-script/.eslintrc.yaml create mode 100644 packages/gatsby-script/.gitignore create mode 100644 packages/gatsby-script/.npmignore create mode 100644 packages/gatsby-script/CHANGELOG.md create mode 100644 packages/gatsby-script/README.md create mode 100644 packages/gatsby-script/index.d.ts create mode 100644 packages/gatsby-script/package.json create mode 100644 packages/gatsby-script/src/__tests__/index.ts create mode 100644 packages/gatsby-script/src/index.tsx create mode 100644 packages/gatsby-script/tsconfig.json diff --git a/packages/gatsby-script/.babelrc b/packages/gatsby-script/.babelrc new file mode 100644 index 0000000000000..12f6f4d21375b --- /dev/null +++ b/packages/gatsby-script/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": [["babel-preset-gatsby-package", { "browser": true }], "@babel/preset-typescript"] +} diff --git a/packages/gatsby-script/.eslintrc.yaml b/packages/gatsby-script/.eslintrc.yaml new file mode 100644 index 0000000000000..6f3b6683ff79e --- /dev/null +++ b/packages/gatsby-script/.eslintrc.yaml @@ -0,0 +1,4 @@ +env: + browser: true +globals: + ___loader: false diff --git a/packages/gatsby-script/.gitignore b/packages/gatsby-script/.gitignore new file mode 100644 index 0000000000000..8a62679881da0 --- /dev/null +++ b/packages/gatsby-script/.gitignore @@ -0,0 +1,2 @@ +/*.js +/__tests__ diff --git a/packages/gatsby-script/.npmignore b/packages/gatsby-script/.npmignore new file mode 100644 index 0000000000000..e771d2c9fa299 --- /dev/null +++ b/packages/gatsby-script/.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 diff --git a/packages/gatsby-script/CHANGELOG.md b/packages/gatsby-script/CHANGELOG.md new file mode 100644 index 0000000000000..16449e89ffddf --- /dev/null +++ b/packages/gatsby-script/CHANGELOG.md @@ -0,0 +1,4 @@ +# Changelog: `gatsby-script` + +All notable changes to this project will be documented in this file. +See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. diff --git a/packages/gatsby-script/README.md b/packages/gatsby-script/README.md new file mode 100644 index 0000000000000..fe95c91944bb9 --- /dev/null +++ b/packages/gatsby-script/README.md @@ -0,0 +1,3 @@ +# gatsby-script + +// TODO diff --git a/packages/gatsby-script/index.d.ts b/packages/gatsby-script/index.d.ts new file mode 100644 index 0000000000000..eb6a7bfa265a4 --- /dev/null +++ b/packages/gatsby-script/index.d.ts @@ -0,0 +1,5 @@ +// TODO - Figure out how we want to actually export public types +export { + IScriptProps as GatsbyScriptProps, + IScriptStrategy as GatsbyScriptStrategy, +} from "./src/index" diff --git a/packages/gatsby-script/package.json b/packages/gatsby-script/package.json new file mode 100644 index 0000000000000..efc62792cad01 --- /dev/null +++ b/packages/gatsby-script/package.json @@ -0,0 +1,46 @@ +{ + "name": "gatsby-script", + "description": "An enhanced script component for Gatsby sites with support for various loading strategies", + "version": "0.1.0", + "author": "Ty Hopp ", + "bugs": { + "url": "https://github.com/gatsbyjs/gatsby/issues" + }, + "dependencies": {}, + "devDependencies": { + "@babel/cli": "^7.15.4", + "@babel/core": "^7.15.5", + "babel-preset-gatsby-package": "^2.13.0-next.0", + "@babel/preset-typescript": "^7.16.7", + "cross-env": "^7.0.3" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0" + }, + "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-script#readme", + "keywords": [ + "gatsby" + ], + "license": "MIT", + "main": "index.js", + "repository": { + "type": "git", + "url": "https://github.com/gatsbyjs/gatsby.git", + "directory": "packages/gatsby-script" + }, + "scripts": { + "build": "babel src --extensions \".js,.jsx,.ts,.tsx\" --out-dir dist --ignore \"**/__tests__\"", + "watch": "babel -w src --extensions \".js,.jsx,.ts,.tsx\" --out-dir dist --ignore \"**/__tests__\"", + "prepare": "cross-env NODE_ENV=production npm run build" + }, + "types": "index.d.ts", + "engines": { + "node": ">=14.15.0" + }, + "files": [ + "dist/", + "index.d.ts", + "!**/__tests__/" + ] +} diff --git a/packages/gatsby-script/src/__tests__/index.ts b/packages/gatsby-script/src/__tests__/index.ts new file mode 100644 index 0000000000000..15296301e7897 --- /dev/null +++ b/packages/gatsby-script/src/__tests__/index.ts @@ -0,0 +1,5 @@ +/** + * @jest-environment jsdom + */ + +// TODO diff --git a/packages/gatsby-script/src/index.tsx b/packages/gatsby-script/src/index.tsx new file mode 100644 index 0000000000000..4f3c9b8536983 --- /dev/null +++ b/packages/gatsby-script/src/index.tsx @@ -0,0 +1,44 @@ +import React, { useEffect } from "react" +import { ReactElement } from "react" + +export enum IScriptStrategy { + preHydrate = `pre-hydrate`, + postHydrate = `post-hydrate`, + idle = `idle`, +} + +export interface IScriptProps { + src: string + strategy?: IScriptStrategy +} + +export default function Script(props: IScriptProps): ReactElement { + const { src, strategy = IScriptStrategy.postHydrate } = props || {} + + useEffect(() => { + switch (strategy) { + case IScriptStrategy.postHydrate: + injectScript(src) + break + case IScriptStrategy.idle: + requestIdleCallback(() => { + injectScript(src) + }) + break + default: + return + } + }, []) + + if (strategy === IScriptStrategy.preHydrate) { + return + + ) } diff --git a/e2e-tests/gatsby-script/src/utils/trim.ts b/e2e-tests/gatsby-script/src/utils/trim.ts new file mode 100644 index 0000000000000..90b21ea28f743 --- /dev/null +++ b/e2e-tests/gatsby-script/src/utils/trim.ts @@ -0,0 +1,3 @@ +export function trim(number: number): number { + return Math.round(Number(number)) +} diff --git a/packages/gatsby-script/README.md b/packages/gatsby-script/README.md index fe95c91944bb9..e4481e3f664cf 100644 --- a/packages/gatsby-script/README.md +++ b/packages/gatsby-script/README.md @@ -1,3 +1,33 @@ # gatsby-script -// TODO +An enhanced script component for Gatsby sites with support for various loading strategies. + +Current usage looks like this (may change while in development): + +```tsx +import * as React from "react" +import { Script, ScriptStrategy } from "gatsby-script" // or 'gatsby', or 'gatsby/script', TBD + +// Example script sources for illustration +const scripts = { + dayjs: `https://unpkg.com/browse/dayjs@1.11.0/dayjs.min.js`, + three: `https://unpkg.com/three@0.139.1/build/three.js`, + marked: `https://cdn.jsdelivr.net/npm/marked/marked.min.js`, +} + +// Strategy prop is optional, defaults to post-hydrate +function IndexPage() { + return ( +
+

Script component proof of concept

+ +
+ ) +} + +export default IndexPage +``` diff --git a/packages/gatsby-script/src/__tests__/gatsby-script.tsx b/packages/gatsby-script/src/__tests__/gatsby-script.tsx index e25f310ee3848..74336e2d74650 100644 --- a/packages/gatsby-script/src/__tests__/gatsby-script.tsx +++ b/packages/gatsby-script/src/__tests__/gatsby-script.tsx @@ -6,10 +6,17 @@ import React from "react" import { render } from "@testing-library/react" import { Script, ScriptStrategy } from "../gatsby-script" -const scripts = { +const scripts: Record = { react: `https://unpkg.com/react@18/umd/react.development.js`, + inline: `console.log('Hello world!')`, } +const strategies: Array = [ + ScriptStrategy.preHydrate, + ScriptStrategy.postHydrate, + ScriptStrategy.idle, +] + describe(`Script`, () => { beforeAll(() => { // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -65,4 +72,27 @@ describe(`Script`, () => { const script = container.parentElement?.querySelector(`script`) expect(script?.getAttribute(`async`)).not.toBeNull() }) + + it(`should work with inline scripts passed via the dangerouslySetInnerHTML prop`, () => { + for (const strategy of strategies) { + const { container } = render( + + ) + const script = container.parentElement?.querySelector(`script`) + expect(script?.textContent).toBe(scripts.inline) + } + }) }) diff --git a/packages/gatsby-script/src/gatsby-script.tsx b/packages/gatsby-script/src/gatsby-script.tsx index 4b6758c41a146..261cf44f0c35e 100644 --- a/packages/gatsby-script/src/gatsby-script.tsx +++ b/packages/gatsby-script/src/gatsby-script.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from "react" -import { ReactElement } from "react" +import type { ReactElement } from "react" export enum ScriptStrategy { preHydrate = `pre-hydrate`, @@ -9,8 +9,12 @@ export enum ScriptStrategy { // eslint-disable-next-line @typescript-eslint/naming-convention export interface ScriptProps { - src: string + src?: string strategy?: ScriptStrategy + dangerouslySetInnerHTML?: { + __html: string + } + children?: string } export function Script(props: ScriptProps): ReactElement { @@ -19,11 +23,11 @@ export function Script(props: ScriptProps): ReactElement { useEffect(() => { switch (strategy) { case ScriptStrategy.postHydrate: - injectScript(src, strategy) + injectScript(props) break case ScriptStrategy.idle: requestIdleCallback(() => { - injectScript(src, strategy) + injectScript(props) }) break default: @@ -32,15 +36,41 @@ export function Script(props: ScriptProps): ReactElement { }, []) if (strategy === ScriptStrategy.preHydrate) { + const inlineScript = resolveInlineScript(props) + + if (inlineScript) { + return ( + + ) + } + return ) - const script = container.parentElement?.querySelector(`script`) - expect(script?.textContent).toBe(scripts.inline) + const script = container.parentElement.querySelector(`script`) + expect(script.textContent).toBe(scripts.inline) + } + }) + + it(`should apply normal attributes`, () => { + const lines = { + first: `It's the bear necessities`, + second: `the simple bear necessities`, + third: `forget about your worries and your strife`, + } + + for (const strategy of strategies) { + const { container } = render( + + ) + + const script = container.parentElement.querySelector(`script`) + + expect(script.dataset.first).toBe(lines.first) + expect(script.dataset.second).toBe(lines.second) + expect(script.dataset.third).toBe(lines.third) } }) }) diff --git a/packages/gatsby-script/src/gatsby-script.tsx b/packages/gatsby-script/src/gatsby-script.tsx index 261cf44f0c35e..6c7f5c78c0bba 100644 --- a/packages/gatsby-script/src/gatsby-script.tsx +++ b/packages/gatsby-script/src/gatsby-script.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from "react" -import type { ReactElement } from "react" +import type { ReactElement, ScriptHTMLAttributes } from "react" export enum ScriptStrategy { preHydrate = `pre-hydrate`, @@ -8,15 +8,18 @@ export enum ScriptStrategy { } // eslint-disable-next-line @typescript-eslint/naming-convention -export interface ScriptProps { - src?: string +export interface ScriptProps extends ScriptHTMLAttributes { strategy?: ScriptStrategy - dangerouslySetInnerHTML?: { - __html: string - } children?: string } +const handledProps = new Set([ + `src`, + `strategy`, + `dangerouslySetInnerHTML`, + `children`, +]) + export function Script(props: ScriptProps): ReactElement { const { src, strategy = ScriptStrategy.postHydrate } = props || {} @@ -37,16 +40,17 @@ export function Script(props: ScriptProps): ReactElement { if (strategy === ScriptStrategy.preHydrate) { const inlineScript = resolveInlineScript(props) + const attributes = resolveAttributes(props) if (inlineScript) { return ( - ) } - return - - +

Tests are on other pages, links below.

+ +

Links to pages (anchor):

+ + +

Links to pages (gatsby-link):

+
    + {pages.map(({ name, path }) => ( +
  • + + {`${name} (gatsby-link)`} + +
    • + ))} +
) } diff --git a/e2e-tests/gatsby-script/src/pages/inline-scripts.tsx b/e2e-tests/gatsby-script/src/pages/inline-scripts.tsx new file mode 100644 index 0000000000000..27d3a2e4c75a3 --- /dev/null +++ b/e2e-tests/gatsby-script/src/pages/inline-scripts.tsx @@ -0,0 +1,99 @@ +import * as React from "react" +import { Link } from "gatsby" +import { ScriptResourceRecords } from "../components/script-resource-records" +import { ScriptMarkRecords } from "../components/script-mark-records" +import { useOccupyMainThread } from "../hooks/use-occupy-main-thread" +import { inlineScripts, InlineScript } from "../../scripts" +import "../styles/global.css" + +// TODO - Import from gatsby core after gatsby-script is in general availability +import { Script, ScriptStrategy } from "gatsby-script" + +function IndexPage() { + useOccupyMainThread() + + return ( +
+

Script component e2e test

+ +
+

Framework script

+ record.name.includes(`framework`)} + count={1} + /> + +
+

Inline scripts

+ + +
+ + + + + +
+ ) +} + +export default IndexPage diff --git a/e2e-tests/gatsby-script/src/pages/scripts-with-sources.tsx b/e2e-tests/gatsby-script/src/pages/scripts-with-sources.tsx new file mode 100644 index 0000000000000..939c5c13c5efa --- /dev/null +++ b/e2e-tests/gatsby-script/src/pages/scripts-with-sources.tsx @@ -0,0 +1,61 @@ +import * as React from "react" +import { Link } from "gatsby" +import { ScriptResourceRecords } from "../components/script-resource-records" +import { useOccupyMainThread } from "../hooks/use-occupy-main-thread" +import { scripts, scriptUrls } from "../../scripts" +import { onLoad } from "../utils/on-load" +import "../styles/global.css" + +// TODO - Import from gatsby core after gatsby-script is in general availability +import { Script, ScriptStrategy } from "gatsby-script" + +function IndexPage() { + useOccupyMainThread() + + return ( +
+

Script component e2e test

+ +
+

Scripts with sources

+ + scriptUrls.has(record.name) || record.name.includes(`framework`) + } + count={4} + /> + +
+ + + - ) - } - - return + ) const script = container.parentElement.querySelector(`script`) expect(script.textContent).toBe(scripts.inline) From a0c245c06f29ca2d40b7eb315389d5d4526cba4c Mon Sep 17 00:00:00 2001 From: Ty Hopp Date: Mon, 9 May 2022 10:38:25 +0800 Subject: [PATCH 20/63] feat(gatsby-script): Off main thread implementation (#35490) * feat(gatsby-script): Partytown internal plugin * feat(gatsby-script): Collect forward props * chore(gatsby-script): Update e2e test to import from gatsby core * chore(gatsby-script): Remove alpha version in core package json * chore(gatsby-script): Define latest gatsby-script in package.json instead * chore(gatsby-script): Lock gatsby-script dep to specific version * refactor(gatsby-script): Do not pass collected scripts to avoid re-renders in SSR * feat(gatsby-script): Collect scripts per page * chore(gatsby-script): Bump alpha * feat(gatsby-script): Proxy Partytown src urls * chore(gatsby-script): Bump alpha * chore(gatsby-script): Test redirects * feat(gatsby-script): Conditionally inject Partytown snippet * feat(gatsby-script): Gatsby serve support * chore(gatsby-script): Remove test redirect --- .../cypress/integration/inline-scripts.ts | 4 +- .../integration/scripts-with-sources.ts | 4 +- e2e-tests/gatsby-script/package.json | 1 - e2e-tests/gatsby-script/records.ts | 2 +- .../src/pages/inline-scripts.tsx | 5 +- .../src/pages/scripts-with-sources.tsx | 5 +- packages/gatsby-script/package.json | 4 +- .../src/__tests__/gatsby-script.tsx | 11 + packages/gatsby-script/src/gatsby-script.tsx | 58 +++- packages/gatsby-script/src/index.ts | 4 +- .../gatsby-script/src/partytown-context.tsx | 8 + .../gatsby/cache-dir/gatsby-browser-entry.js | 2 + packages/gatsby/index.d.ts | 2 + packages/gatsby/package.json | 6 +- .../load-plugins/load-internal-plugins.ts | 1 + .../gatsby/src/commands/develop-process.ts | 14 +- packages/gatsby/src/commands/serve.ts | 13 + .../internal-plugins/partytown/gatsby-node.ts | 29 ++ .../internal-plugins/partytown/gatsby-ssr.tsx | 46 +++ .../src/internal-plugins/partytown/index.js | 1 + .../internal-plugins/partytown/package.json | 12 + packages/gatsby/src/utils/webpack-utils.ts | 1 + yarn.lock | 310 ++++++++++-------- 23 files changed, 377 insertions(+), 166 deletions(-) create mode 100644 packages/gatsby-script/src/partytown-context.tsx create mode 100644 packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts create mode 100644 packages/gatsby/src/internal-plugins/partytown/gatsby-ssr.tsx create mode 100644 packages/gatsby/src/internal-plugins/partytown/index.js create mode 100644 packages/gatsby/src/internal-plugins/partytown/package.json diff --git a/e2e-tests/gatsby-script/cypress/integration/inline-scripts.ts b/e2e-tests/gatsby-script/cypress/integration/inline-scripts.ts index 4f4f583c755e0..271972fd23610 100644 --- a/e2e-tests/gatsby-script/cypress/integration/inline-scripts.ts +++ b/e2e-tests/gatsby-script/cypress/integration/inline-scripts.ts @@ -1,9 +1,7 @@ +import { ScriptStrategy } from "gatsby" import { InlineScript } from "../../scripts" import { ResourceRecord, MarkRecord } from "../../records" -// TODO - Import from gatsby core after gatsby-script is in general availability -import { ScriptStrategy } from "gatsby-script" - // The page that we will assert against const page = `/inline-scripts` diff --git a/e2e-tests/gatsby-script/cypress/integration/scripts-with-sources.ts b/e2e-tests/gatsby-script/cypress/integration/scripts-with-sources.ts index dcba0ea32b3a0..083f2901b6635 100644 --- a/e2e-tests/gatsby-script/cypress/integration/scripts-with-sources.ts +++ b/e2e-tests/gatsby-script/cypress/integration/scripts-with-sources.ts @@ -1,9 +1,7 @@ +import { ScriptStrategy } from "gatsby" import { Script, scripts } from "../../scripts" import { ResourceRecord } from "../../records" -// TODO - Import from gatsby core after gatsby-script is in general availability -import { ScriptStrategy } from "gatsby-script" - // The page that we will assert against const page = `/scripts-with-sources` diff --git a/e2e-tests/gatsby-script/package.json b/e2e-tests/gatsby-script/package.json index 8e358e58664b5..6ef72e369e7b9 100644 --- a/e2e-tests/gatsby-script/package.json +++ b/e2e-tests/gatsby-script/package.json @@ -6,7 +6,6 @@ "dependencies": { "cypress": "^9.1.1", "gatsby": "next", - "gatsby-script": "^1.0.0-alpha-gatsby-script.20088", "react": "^17.0.2", "react-dom": "^17.0.2" }, diff --git a/e2e-tests/gatsby-script/records.ts b/e2e-tests/gatsby-script/records.ts index d96d254e325f6..5f04e8722a099 100644 --- a/e2e-tests/gatsby-script/records.ts +++ b/e2e-tests/gatsby-script/records.ts @@ -1,4 +1,4 @@ -import { ScriptStrategy } from "gatsby-script" +import { ScriptStrategy } from "gatsby" import { InlineScript } from "./scripts" /** diff --git a/e2e-tests/gatsby-script/src/pages/inline-scripts.tsx b/e2e-tests/gatsby-script/src/pages/inline-scripts.tsx index bacefaa2c394c..374cabbd513e1 100644 --- a/e2e-tests/gatsby-script/src/pages/inline-scripts.tsx +++ b/e2e-tests/gatsby-script/src/pages/inline-scripts.tsx @@ -1,14 +1,11 @@ import * as React from "react" -import { Link } from "gatsby" +import { Link, Script, ScriptStrategy } from "gatsby" import { ScriptResourceRecords } from "../components/script-resource-records" import { ScriptMarkRecords } from "../components/script-mark-records" import { useOccupyMainThread } from "../hooks/use-occupy-main-thread" import { inlineScripts, InlineScript } from "../../scripts" import "../styles/global.css" -// TODO - Import from gatsby core after gatsby-script is in general availability -import { Script, ScriptStrategy } from "gatsby-script" - function InlineScriptsPage() { useOccupyMainThread() diff --git a/e2e-tests/gatsby-script/src/pages/scripts-with-sources.tsx b/e2e-tests/gatsby-script/src/pages/scripts-with-sources.tsx index 98b233270cdcf..5b4212ee7dffc 100644 --- a/e2e-tests/gatsby-script/src/pages/scripts-with-sources.tsx +++ b/e2e-tests/gatsby-script/src/pages/scripts-with-sources.tsx @@ -1,14 +1,11 @@ import * as React from "react" -import { Link } from "gatsby" +import { Link, Script, ScriptStrategy } from "gatsby" import { ScriptResourceRecords } from "../components/script-resource-records" import { useOccupyMainThread } from "../hooks/use-occupy-main-thread" import { scripts, scriptUrls } from "../../scripts" import { onLoad, onError } from "../utils/callbacks" import "../styles/global.css" -// TODO - Import from gatsby core after gatsby-script is in general availability -import { Script, ScriptStrategy } from "gatsby-script" - function ScriptsWithSourcesPage() { useOccupyMainThread() diff --git a/packages/gatsby-script/package.json b/packages/gatsby-script/package.json index e00e9b28fab52..9878a249950e7 100644 --- a/packages/gatsby-script/package.json +++ b/packages/gatsby-script/package.json @@ -25,7 +25,9 @@ "watch": "babel -w src --extensions \".js,.jsx,.ts,.tsx\" --out-dir dist --ignore \"**/__tests__\"", "prepare": "cross-env NODE_ENV=production npm run build && npm run typegen" }, - "dependencies": {}, + "dependencies": { + "@builder.io/partytown": "^0.5.2" + }, "devDependencies": { "@babel/cli": "^7.15.4", "@babel/core": "^7.15.5", diff --git a/packages/gatsby-script/src/__tests__/gatsby-script.tsx b/packages/gatsby-script/src/__tests__/gatsby-script.tsx index 348043eb7c293..2143f78f8adb9 100644 --- a/packages/gatsby-script/src/__tests__/gatsby-script.tsx +++ b/packages/gatsby-script/src/__tests__/gatsby-script.tsx @@ -57,6 +57,17 @@ describe(`Script`, () => { expect(script.getAttribute(`data-strategy`)).toEqual(ScriptStrategy.idle) }) + it(`should be possible to declare an off-main-thread strategy`, () => { + const { container } = render( + + ) + } + return ( + +``` + +Functionally, both of these ways of defining inline scripts are equivalent. + +## Strategies + +You can declare a loading strategy by passing a `strategy` property. These are the available loading strategies: + +- `post-hydrate` - Loads after the page has hydrated +- `idle` - Loads after the page has become idle +- `off-main-thread` - Loads off the main thread in a web worker via [Partytown](https://partytown.builder.io) + +The best strategy to use depends on the functionality of the script you would like to include. + +A general rule of thumb is if your script can afford to be loaded later (as many analytics scripts can be), then start with `off-main-thread` or `idle` and move to earlier loading strategies if necessary. + +Here's how you can define these strategies in the ` +``` + +See the [Gatsby blog post on the topic](https://www.gatsbyjs.com/blog/how-to-add-google-analytics-gtag-to-gatsby-using-partytown/) for more context. + +#### Forward collection + +Gatsby will collect all `off-main-thread` scripts on a page, and automatically merge any [Partytown forwarded events](https://partytown.builder.io/forwarding-events) into a single configuration for each page. + +There's nothing you need to do to make this work, but it is useful to be aware of in case you have an advanced use case. + +#### Proxying requests + +One challenge of using Partytown under the hood is [proxying requests](https://partytown.builder.io/proxying-requests). The nature of loading scripts in a web worker means that the script's response requires the correct CORS headers, and not all third party scripts provide them. + +Gatsby solves this for you out of the box when running your site via `gatsby develop`, `gatsby serve`, and when your site is deployed with [Gatsby Cloud](https://www.gatsbyjs.com/products/cloud/). + +In practice, this means that you should not have to configure your own URL reverse proxy for most use cases. + +Hosting on other providers may require you to implement the reverse proxy solution [as described in the Partytown documentation](https://partytown.builder.io/proxying-requests) depending on your third-party script. + +#### Trade-offs + +By leveraging [Partytown](https://partytown.builder.io), scripts that use the `off-main-thread` strategy must also be aware of the [trade-offs 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. + +In addition: + +- `off-main-thread` scripts load only on server-side render (e.g. initial page render, page reload, etc.) and not on client-side render (e.g. navigation via Gatsby Link) +- `off-main-thread` scripts cannot use the `onLoad` and `onError` callbacks + +### `onLoad` and `onError` callbacks + +Scripts with sources loaded with the `post-hydrate` or `idle` strategies have access to two callbacks: + +- `onLoad` - Called once the script has loaded +- `onError` - Called if the script failed to load + +> Note - Inline scripts and scripts using the `off-main-thread` strategy **do not** support the `onLoad` and `onError` callbacks. + +Here is an example using the callbacks: + +```tsx + + +
) } diff --git a/packages/gatsby-script/package.json b/packages/gatsby-script/package.json index c66cbfe055277..a700676862581 100644 --- a/packages/gatsby-script/package.json +++ b/packages/gatsby-script/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-script", "description": "An enhanced script component for Gatsby sites with support for various loading strategies", - "version": "1.0.0-next.0", + "version": "1.0.0-next.1", "author": "Ty Hopp ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" diff --git a/packages/gatsby/package.json b/packages/gatsby/package.json index 1ab2edf3fbb50..8c21ace168166 100644 --- a/packages/gatsby/package.json +++ b/packages/gatsby/package.json @@ -98,7 +98,7 @@ "gatsby-plugin-typescript": "^4.15.0-next.0", "gatsby-plugin-utils": "^3.9.0-next.0", "gatsby-react-router-scroll": "^5.15.0-next.0", - "gatsby-script": "1.0.0-alpha-gatsby-script.20100", + "gatsby-script": "1.0.0-next.1", "gatsby-telemetry": "^3.15.0-next.0", "gatsby-worker": "^1.15.0-next.0", "glob": "^7.2.0", diff --git a/yarn.lock b/yarn.lock index c35a6981d1511..af2482cde19f7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1394,14 +1394,14 @@ "@babel/helper-plugin-utils" "^7.14.5" "@babel/helper-replace-supers" "^7.14.5" -"@babel/plugin-transform-parameters@^7.0.0", "@babel/plugin-transform-parameters@^7.16.7": +"@babel/plugin-transform-parameters@^7.0.0", "@babel/plugin-transform-parameters@^7.12.1", "@babel/plugin-transform-parameters@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.16.7.tgz#a1721f55b99b736511cb7e0152f61f17688f331f" integrity sha512-AT3MufQ7zZEhU2hwOA11axBnExW0Lszu4RL/tAlUJBuNoRak+wehQW8h6KcXOcgjY42fHtDxswuMhMjFEuv/aw== dependencies: "@babel/helper-plugin-utils" "^7.16.7" -"@babel/plugin-transform-parameters@^7.12.1", "@babel/plugin-transform-parameters@^7.14.5", "@babel/plugin-transform-parameters@^7.15.4": +"@babel/plugin-transform-parameters@^7.14.5", "@babel/plugin-transform-parameters@^7.15.4": version "7.15.4" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.15.4.tgz#5f2285cc3160bf48c8502432716b48504d29ed62" integrity sha512-9WB/GUTO6lvJU3XQsSr6J/WKvBC2hcs4Pew8YxZagi6GkTdniyqp8On5kqdK8MN0LMeu0mGbhPN+O049NV/9FQ== @@ -1804,7 +1804,7 @@ debug "^4.1.0" globals "^11.1.0" -"@babel/types@^7.0.0", "@babel/types@^7.0.0-beta.49", "@babel/types@^7.12.1", "@babel/types@^7.12.7", "@babel/types@^7.14.5", "@babel/types@^7.14.9", "@babel/types@^7.15.4", "@babel/types@^7.16.0", "@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4": +"@babel/types@^7.0.0", "@babel/types@^7.0.0-beta.49", "@babel/types@^7.12.1", "@babel/types@^7.14.5", "@babel/types@^7.14.9", "@babel/types@^7.15.4", "@babel/types@^7.16.0", "@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4": version "7.17.0" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b" integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw== @@ -1812,7 +1812,7 @@ "@babel/helper-validator-identifier" "^7.16.7" to-fast-properties "^2.0.0" -"@babel/types@^7.17.10": +"@babel/types@^7.12.7", "@babel/types@^7.17.10": version "7.17.10" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.10.tgz#d35d7b4467e439fcf06d195f8100e0fea7fc82c4" integrity sha512-9O26jG0mBYfGkUYCYZRnBwbVLd1UZOICEr2Em6InB6jVfsAv1GKgwXHmrSg+WFWDmeKTA6vyTZiN8tCSM5Oo3A== @@ -11987,13 +11987,6 @@ gatsby-core-utils@^3.8.2: tmp "^0.2.1" xdg-basedir "^4.0.0" -gatsby-script@1.0.0-alpha-gatsby-script.20100: - version "1.0.0-alpha-gatsby-script.20100" - resolved "https://registry.yarnpkg.com/gatsby-script/-/gatsby-script-1.0.0-alpha-gatsby-script.20100.tgz#a058c83e5a9c71957aabab7d28b280ff16cd2da3" - integrity sha512-ApFa7h2hAtJdx74TxjXU0KNRVXTWhphGg5n6AIR73smmYRVom2Bio3hivIBBr1Ebmk8BLWZYojhcAe0ptLE8bQ== - dependencies: - "@builder.io/partytown" "^0.5.2" - gauge@~2.7.3: version "2.7.4" resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7" @@ -12673,9 +12666,9 @@ graphql@^15.7.2, graphql@^15.8.0: integrity sha512-5gghUc24tP9HRznNpV2+FIoq3xKkj5dTQqf4v0CpdPbFVwFkWoxOM+o+2OC9ZSvjEMTjfmG9QT+gcvggTwW1zw== graphql@^16.3.0: - version "16.4.0" - resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.4.0.tgz#bb10b1b4683045dedcb67000eb4ad134a36c59e6" - integrity sha512-tYDNcRvKCcfHREZYje3v33NSrSD/ZpbWWdPtBtUUuXx9NCo/2QDxYzNqCnMvfsrnbwRpEHMovVrPu/ERoLrIRg== + version "16.5.0" + resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.5.0.tgz#41b5c1182eaac7f3d47164fb247f61e4dfb69c85" + integrity sha512-qbHgh8Ix+j/qY+a/ZcJnFQ+j8ezakqPiHwPiZhV/3PgGlgf96QMBB5/f2rkiC9sgLoy/xvT6TSiaf2nTHJh5iA== gray-matter@^2.1.0: version "2.1.1" From 3d705c39ec0b020afea93318e911f6696e980df5 Mon Sep 17 00:00:00 2001 From: tyhopp Date: Tue, 10 May 2022 16:05:03 +0800 Subject: [PATCH 24/63] Update load plugins snapshots --- .../__snapshots__/load-plugins.ts.snap | 123 +++++++++++++++++- 1 file changed, 120 insertions(+), 3 deletions(-) diff --git a/packages/gatsby/src/bootstrap/load-plugins/__tests__/__snapshots__/load-plugins.ts.snap b/packages/gatsby/src/bootstrap/load-plugins/__tests__/__snapshots__/load-plugins.ts.snap index ba478723ae7ae..79c2d4f7a1343 100644 --- a/packages/gatsby/src/bootstrap/load-plugins/__tests__/__snapshots__/load-plugins.ts.snap +++ b/packages/gatsby/src/bootstrap/load-plugins/__tests__/__snapshots__/load-plugins.ts.snap @@ -91,8 +91,8 @@ Array [ "id": "", "name": "functions", "nodeAPIs": Array [ - "onPreBootstrap", "onCreateDevServer", + "onPreBootstrap", ], "pluginOptions": Object { "plugins": Array [], @@ -101,6 +101,24 @@ Array [ "ssrAPIs": Array [], "version": "1.0.0", }, + Object { + "browserAPIs": Array [], + "id": "", + "name": "partytown", + "nodeAPIs": Array [ + "onPreBootstrap", + "createPages", + ], + "pluginOptions": Object { + "plugins": Array [], + }, + "resolve": "", + "ssrAPIs": Array [ + "wrapRootElement", + "onRenderBody", + ], + "version": "1.0.0", + }, Object { "browserAPIs": Array [], "id": "", @@ -248,6 +266,27 @@ Array [ "subPluginPaths": undefined, "version": "1.0.0", }, + Object { + "browserAPIs": Array [], + "id": "", + "module": undefined, + "modulePath": undefined, + "name": "gatsby-plugin-page-creator", + "nodeAPIs": Array [ + "createPagesStatefully", + "setFieldsOnGraphQLNodeType", + "onPluginInit", + ], + "pluginOptions": Object { + "path": "/packages/gatsby/src/internal-plugins/partytown/src/pages", + "pathCheck": false, + "plugins": Array [], + }, + "resolve": "", + "ssrAPIs": Array [], + "subPluginPaths": undefined, + "version": "1.0.0", + }, Object { "browserAPIs": Array [], "id": "", @@ -399,8 +438,8 @@ Array [ "id": "", "name": "functions", "nodeAPIs": Array [ - "onPreBootstrap", "onCreateDevServer", + "onPreBootstrap", ], "pluginOptions": Object { "plugins": Array [], @@ -409,6 +448,24 @@ Array [ "ssrAPIs": Array [], "version": "1.0.0", }, + Object { + "browserAPIs": Array [], + "id": "", + "name": "partytown", + "nodeAPIs": Array [ + "onPreBootstrap", + "createPages", + ], + "pluginOptions": Object { + "plugins": Array [], + }, + "resolve": "", + "ssrAPIs": Array [ + "wrapRootElement", + "onRenderBody", + ], + "version": "1.0.0", + }, Object { "browserAPIs": Array [], "id": "", @@ -568,6 +625,27 @@ Array [ "subPluginPaths": undefined, "version": "1.0.0", }, + Object { + "browserAPIs": Array [], + "id": "", + "module": undefined, + "modulePath": undefined, + "name": "gatsby-plugin-page-creator", + "nodeAPIs": Array [ + "createPagesStatefully", + "setFieldsOnGraphQLNodeType", + "onPluginInit", + ], + "pluginOptions": Object { + "path": "/packages/gatsby/src/internal-plugins/partytown/src/pages", + "pathCheck": false, + "plugins": Array [], + }, + "resolve": "", + "ssrAPIs": Array [], + "subPluginPaths": undefined, + "version": "1.0.0", + }, Object { "browserAPIs": Array [], "id": "", @@ -740,8 +818,8 @@ Array [ "id": "", "name": "functions", "nodeAPIs": Array [ - "onPreBootstrap", "onCreateDevServer", + "onPreBootstrap", ], "pluginOptions": Object { "plugins": Array [], @@ -750,6 +828,24 @@ Array [ "ssrAPIs": Array [], "version": "1.0.0", }, + Object { + "browserAPIs": Array [], + "id": "", + "name": "partytown", + "nodeAPIs": Array [ + "onPreBootstrap", + "createPages", + ], + "pluginOptions": Object { + "plugins": Array [], + }, + "resolve": "", + "ssrAPIs": Array [ + "wrapRootElement", + "onRenderBody", + ], + "version": "1.0.0", + }, Object { "browserAPIs": Array [], "id": "", @@ -920,6 +1016,27 @@ Array [ "subPluginPaths": undefined, "version": "1.0.0", }, + Object { + "browserAPIs": Array [], + "id": "", + "module": undefined, + "modulePath": undefined, + "name": "gatsby-plugin-page-creator", + "nodeAPIs": Array [ + "createPagesStatefully", + "setFieldsOnGraphQLNodeType", + "onPluginInit", + ], + "pluginOptions": Object { + "path": "/packages/gatsby/src/internal-plugins/partytown/src/pages", + "pathCheck": false, + "plugins": Array [], + }, + "resolve": "", + "ssrAPIs": Array [], + "subPluginPaths": undefined, + "version": "1.0.0", + }, Object { "browserAPIs": Array [], "id": "", From 31a6923d3a6a7133acc74ca6fd84ec752112271a Mon Sep 17 00:00:00 2001 From: tyhopp Date: Tue, 10 May 2022 18:02:28 +0800 Subject: [PATCH 25/63] Fix lockfile --- yarn.lock | 258 +++++++++++++++++++++++++++++------------------------- 1 file changed, 137 insertions(+), 121 deletions(-) diff --git a/yarn.lock b/yarn.lock index af2482cde19f7..c8196e66e3fd5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -198,6 +198,28 @@ resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.7.tgz#078d8b833fbbcc95286613be8c716cef2b519fa2" integrity sha512-p8pdE6j0a29TNGebNm7NzYZWB3xVZJBZ7XGs42uAKzQo8VQ3F0By/cQCtUEABwIqw5zo6WA4NbmxsfzADzMKnQ== +"@babel/core@7.10.5": + version "7.10.5" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.10.5.tgz#1f15e2cca8ad9a1d78a38ddba612f5e7cdbbd330" + integrity sha512-O34LQooYVDXPl7QWCdW9p4NR+QlzOr7xShPPJz8GsuCU3/8ua/wqTr7gmnxXv+WBESiGU/G5s16i6tUvHkNb+w== + dependencies: + "@babel/code-frame" "^7.10.4" + "@babel/generator" "^7.10.5" + "@babel/helper-module-transforms" "^7.10.5" + "@babel/helpers" "^7.10.4" + "@babel/parser" "^7.10.5" + "@babel/template" "^7.10.4" + "@babel/traverse" "^7.10.5" + "@babel/types" "^7.10.5" + convert-source-map "^1.7.0" + debug "^4.1.0" + gensync "^1.0.0-beta.1" + json5 "^2.1.2" + lodash "^4.17.19" + resolve "^1.3.2" + semver "^5.4.1" + source-map "^0.5.0" + "@babel/core@7.12.3": version "7.12.3" resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.3.tgz#1b436884e1e3bff6fb1328dc02b208759de92ad8" @@ -309,7 +331,7 @@ jsesc "^2.5.1" source-map "^0.5.0" -"@babel/generator@^7.12.1", "@babel/generator@^7.12.11", "@babel/generator@^7.15.4", "@babel/generator@^7.16.8", "@babel/generator@^7.17.3", "@babel/generator@^7.7.2": +"@babel/generator@^7.10.5", "@babel/generator@^7.12.1", "@babel/generator@^7.12.11", "@babel/generator@^7.12.5", "@babel/generator@^7.15.4", "@babel/generator@^7.16.8", "@babel/generator@^7.17.3", "@babel/generator@^7.7.2": version "7.17.3" resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.3.tgz#a2c30b0c4f89858cb87050c3ffdfd36bdf443200" integrity sha512-+R6Dctil/MgUsZsZAkYgK+ADNSZzJRRy0TvY65T71z/CR854xHQ1EweBYXdfT+HNeN7w0cSJJEzgxZMv40pxsg== @@ -318,15 +340,6 @@ jsesc "^2.5.1" source-map "^0.5.0" -"@babel/generator@^7.12.5", "@babel/generator@^7.17.10": - version "7.17.10" - resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.10.tgz#c281fa35b0c349bbe9d02916f4ae08fc85ed7189" - integrity sha512-46MJZZo9y3o4kmhBVc7zW7i8dtR1oIK/sdO5NcfcZRhTGYi+KKJRtHNgsU6c4VUcJmUNV/LQdebD/9Dlv4K+Tg== - dependencies: - "@babel/types" "^7.17.10" - "@jridgewell/gen-mapping" "^0.1.0" - jsesc "^2.5.1" - "@babel/generator@^7.14.0", "@babel/generator@^7.17.9": version "7.17.9" resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.9.tgz#f4af9fd38fa8de143c29fce3f71852406fc1e2fc" @@ -479,7 +492,7 @@ dependencies: "@babel/types" "^7.16.7" -"@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.14.5", "@babel/helper-module-transforms@^7.15.4": +"@babel/helper-module-transforms@^7.10.5", "@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.14.5", "@babel/helper-module-transforms@^7.15.4": version "7.15.4" resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.15.4.tgz#962cc629a7f7f9a082dd62d0307fa75fe8788d7c" integrity sha512-9fHHSGE9zTC++KuXLZcB5FKgvlV83Ox+NLUmQTawovwlJ85+QMhk1CnVk406CQVj97LaWod6KVjl2Sfgw9Aktw== @@ -619,7 +632,7 @@ "@babel/traverse" "^7.15.4" "@babel/types" "^7.15.4" -"@babel/helpers@^7.12.1", "@babel/helpers@^7.15.4": +"@babel/helpers@^7.10.4", "@babel/helpers@^7.12.1", "@babel/helpers@^7.12.5", "@babel/helpers@^7.15.4": version "7.15.4" resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.15.4.tgz#5f40f02050a3027121a3cf48d497c05c555eaf43" integrity sha512-V45u6dqEJ3w2rlryYYXf6i9rQ5YMNu4FLS6ngs8ikblhu2VdR1AqAd6aJjBzmf2Qzh6KOLqKHxEN9+TFbAkAVQ== @@ -628,7 +641,7 @@ "@babel/traverse" "^7.15.4" "@babel/types" "^7.15.4" -"@babel/helpers@^7.12.5", "@babel/helpers@^7.17.9": +"@babel/helpers@^7.17.9": version "7.17.9" resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.17.9.tgz#b2af120821bfbe44f9907b1826e168e819375a1a" integrity sha512-cPCt915ShDWUEzEp3+UNRktO2n6v49l5RSnG9M5pS24hA+2FAc5si+Pn1i4VVbQQ+jh+bIZhPFQOJOzbrOYY1Q== @@ -663,16 +676,11 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.3.tgz#a305415ebe7a6c7023b40b5122a0662d928334cd" integrity sha512-kFsOS0IbsuhO5ojF8Hc8z/8vEIOkylVBrjiZUbLTE3XFe0Qi+uu6HjzQixkFaqr0ZPAMZcBVxEwmsnsLPZ2Xsw== -"@babel/parser@^7.1.0", "@babel/parser@^7.12.3", "@babel/parser@^7.13.16", "@babel/parser@^7.15.5", "@babel/parser@^7.16.7", "@babel/parser@^7.17.3", "@babel/parser@^7.3.3", "@babel/parser@^7.7.2": +"@babel/parser@^7.1.0", "@babel/parser@^7.10.5", "@babel/parser@^7.12.3", "@babel/parser@^7.12.7", "@babel/parser@^7.13.16", "@babel/parser@^7.15.5", "@babel/parser@^7.16.7", "@babel/parser@^7.17.3", "@babel/parser@^7.3.3", "@babel/parser@^7.7.2": version "7.17.3" resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.3.tgz#b07702b982990bf6fdc1da5049a23fece4c5c3d0" integrity sha512-7yJPvPV+ESz2IUTPbOL+YkIGyCqOyNIzdguKQuJGnH7bg1WTIifuM21YqokFt/THWh1AkCRn9IgoykTRCBVpzA== -"@babel/parser@^7.12.7", "@babel/parser@^7.17.10": - version "7.17.10" - resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.10.tgz#873b16db82a8909e0fbd7f115772f4b739f6ce78" - integrity sha512-n2Q6i+fnJqzOaq2VkdXxy2TCPCWQZHiCo0XqmrCvDWcZQKRyZzYi4Z0yxlBuN0w+r2ZHmre+Q087DSrw3pbJDQ== - "@babel/parser@^7.14.0", "@babel/parser@^7.16.8", "@babel/parser@^7.17.9": version "7.17.9" resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.9.tgz#9c94189a6062f0291418ca021077983058e171ef" @@ -819,6 +827,15 @@ "@babel/helper-plugin-utils" "^7.14.5" "@babel/plugin-syntax-numeric-separator" "^7.10.4" +"@babel/plugin-proposal-object-rest-spread@7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.10.4.tgz#50129ac216b9a6a55b3853fdd923e74bf553a4c0" + integrity sha512-6vh4SqRuLLarjgeOf4EaROJAHjvu9Gl+/346PbDH9yWbJyfnJ/ah3jmYKYtswEyCoWZiidvVHjHshd4WgjB9BA== + dependencies: + "@babel/helper-plugin-utils" "^7.10.4" + "@babel/plugin-syntax-object-rest-spread" "^7.8.0" + "@babel/plugin-transform-parameters" "^7.10.4" + "@babel/plugin-proposal-object-rest-spread@7.12.1": version "7.12.1" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.12.1.tgz#def9bd03cea0f9b72283dac0ec22d289c7691069" @@ -1014,6 +1031,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.8.0" +"@babel/plugin-syntax-jsx@7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.10.4.tgz#39abaae3cbf710c4373d8429484e6ba21340166c" + integrity sha512-KCg9mio9jwiARCB7WAcQ7Y1q+qicILjoK8LP/VkPkEKaf5dkaZZK1EcTe91a3JJlZ3qy6L5s9X52boEYi8DM9g== + dependencies: + "@babel/helper-plugin-utils" "^7.10.4" + "@babel/plugin-syntax-jsx@7.12.1": version "7.12.1" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.1.tgz#9d9d357cc818aa7ae7935917c1257f67677a0926" @@ -1394,14 +1418,14 @@ "@babel/helper-plugin-utils" "^7.14.5" "@babel/helper-replace-supers" "^7.14.5" -"@babel/plugin-transform-parameters@^7.0.0", "@babel/plugin-transform-parameters@^7.12.1", "@babel/plugin-transform-parameters@^7.16.7": +"@babel/plugin-transform-parameters@^7.0.0", "@babel/plugin-transform-parameters@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.16.7.tgz#a1721f55b99b736511cb7e0152f61f17688f331f" integrity sha512-AT3MufQ7zZEhU2hwOA11axBnExW0Lszu4RL/tAlUJBuNoRak+wehQW8h6KcXOcgjY42fHtDxswuMhMjFEuv/aw== dependencies: "@babel/helper-plugin-utils" "^7.16.7" -"@babel/plugin-transform-parameters@^7.14.5", "@babel/plugin-transform-parameters@^7.15.4": +"@babel/plugin-transform-parameters@^7.10.4", "@babel/plugin-transform-parameters@^7.12.1", "@babel/plugin-transform-parameters@^7.14.5", "@babel/plugin-transform-parameters@^7.15.4": version "7.15.4" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.15.4.tgz#5f2285cc3160bf48c8502432716b48504d29ed62" integrity sha512-9WB/GUTO6lvJU3XQsSr6J/WKvBC2hcs4Pew8YxZagi6GkTdniyqp8On5kqdK8MN0LMeu0mGbhPN+O049NV/9FQ== @@ -1756,7 +1780,7 @@ "@babel/parser" "^7.16.7" "@babel/types" "^7.16.7" -"@babel/traverse@^7.1.0", "@babel/traverse@^7.1.6", "@babel/traverse@^7.12.1", "@babel/traverse@^7.13.0", "@babel/traverse@^7.15.4", "@babel/traverse@^7.16.7", "@babel/traverse@^7.7.2": +"@babel/traverse@^7.1.0", "@babel/traverse@^7.1.6", "@babel/traverse@^7.10.5", "@babel/traverse@^7.12.1", "@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.15.4", "@babel/traverse@^7.16.7", "@babel/traverse@^7.7.2": version "7.17.3" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.3.tgz#0ae0f15b27d9a92ba1f2263358ea7c4e7db47b57" integrity sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw== @@ -1772,22 +1796,6 @@ debug "^4.1.0" globals "^11.1.0" -"@babel/traverse@^7.12.9": - version "7.17.10" - resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.10.tgz#1ee1a5ac39f4eac844e6cf855b35520e5eb6f8b5" - integrity sha512-VmbrTHQteIdUUQNTb+zE12SHS/xQVIShmBPhlNP12hD5poF2pbITW1Z4172d03HegaQWhLffdkRJYtAzp0AGcw== - dependencies: - "@babel/code-frame" "^7.16.7" - "@babel/generator" "^7.17.10" - "@babel/helper-environment-visitor" "^7.16.7" - "@babel/helper-function-name" "^7.17.9" - "@babel/helper-hoist-variables" "^7.16.7" - "@babel/helper-split-export-declaration" "^7.16.7" - "@babel/parser" "^7.17.10" - "@babel/types" "^7.17.10" - debug "^4.1.0" - globals "^11.1.0" - "@babel/traverse@^7.14.0", "@babel/traverse@^7.16.8", "@babel/traverse@^7.17.3", "@babel/traverse@^7.17.9": version "7.17.9" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.9.tgz#1f9b207435d9ae4a8ed6998b2b82300d83c37a0d" @@ -1804,7 +1812,7 @@ debug "^4.1.0" globals "^11.1.0" -"@babel/types@^7.0.0", "@babel/types@^7.0.0-beta.49", "@babel/types@^7.12.1", "@babel/types@^7.14.5", "@babel/types@^7.14.9", "@babel/types@^7.15.4", "@babel/types@^7.16.0", "@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4": +"@babel/types@^7.0.0", "@babel/types@^7.0.0-beta.49", "@babel/types@^7.10.5", "@babel/types@^7.12.1", "@babel/types@^7.12.7", "@babel/types@^7.14.5", "@babel/types@^7.14.9", "@babel/types@^7.15.4", "@babel/types@^7.16.0", "@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4": version "7.17.0" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b" integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw== @@ -1812,14 +1820,6 @@ "@babel/helper-validator-identifier" "^7.16.7" to-fast-properties "^2.0.0" -"@babel/types@^7.12.7", "@babel/types@^7.17.10": - version "7.17.10" - resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.10.tgz#d35d7b4467e439fcf06d195f8100e0fea7fc82c4" - integrity sha512-9O26jG0mBYfGkUYCYZRnBwbVLd1UZOICEr2Em6InB6jVfsAv1GKgwXHmrSg+WFWDmeKTA6vyTZiN8tCSM5Oo3A== - dependencies: - "@babel/helper-validator-identifier" "^7.16.7" - to-fast-properties "^2.0.0" - "@bcoe/v8-coverage@^0.2.3": version "0.2.3" resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" @@ -2997,24 +2997,11 @@ "@babel/runtime" "^7.7.2" regenerator-runtime "^0.13.3" -"@jridgewell/gen-mapping@^0.1.0": - version "0.1.1" - resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996" - integrity sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w== - dependencies: - "@jridgewell/set-array" "^1.0.0" - "@jridgewell/sourcemap-codec" "^1.4.10" - "@jridgewell/resolve-uri@^3.0.3": version "3.0.5" resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz#68eb521368db76d040a6315cdb24bf2483037b9c" integrity sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew== -"@jridgewell/set-array@^1.0.0": - version "1.1.1" - resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.1.tgz#36a6acc93987adcf0ba50c66908bd0b70de8afea" - integrity sha512-Ct5MqZkLGEXTVmQYbGtx9SVqD2fqwvdubdps5D3djjAkgkKwT918VNOz65pEHFaYTeWcukmJmH5SwsA9Tn2ObQ== - "@jridgewell/sourcemap-codec@^1.4.10": version "1.4.11" resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz#771a1d8d744eeb71b6adb35808e1a6c7b9b8c8ec" @@ -3726,34 +3713,39 @@ "@lukeed/csprng" "^1.0.0" "@mdx-js/mdx@^1.6.16": - version "1.6.22" - resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.6.22.tgz#8a723157bf90e78f17dc0f27995398e6c731f1ba" - integrity sha512-AMxuLxPz2j5/6TpF/XSdKpQP1NlG0z11dFOlq+2IP/lSgl11GY8ji6S/rgsViN/L0BDvHvUMruRb7ub+24LUYA== + version "1.6.16" + resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.6.16.tgz#f01af0140539c1ce043d246259d8becd2153b2bb" + integrity sha512-jnYyJ0aCafCIehn3GjYcibIapaLBgs3YkoenNQBPcPFyyuUty7B3B07OE+pMllhJ6YkWeP/R5Ax19x0nqTzgJw== dependencies: - "@babel/core" "7.12.9" - "@babel/plugin-syntax-jsx" "7.12.1" + "@babel/core" "7.10.5" + "@babel/plugin-syntax-jsx" "7.10.4" "@babel/plugin-syntax-object-rest-spread" "7.8.3" - "@mdx-js/util" "1.6.22" - babel-plugin-apply-mdx-type-prop "1.6.22" - babel-plugin-extract-import-names "1.6.22" + "@mdx-js/util" "1.6.16" + babel-plugin-apply-mdx-type-prop "1.6.16" + babel-plugin-extract-import-names "1.6.16" camelcase-css "2.0.1" - detab "2.0.4" - hast-util-raw "6.0.1" + detab "2.0.3" + hast-util-raw "6.0.0" lodash.uniq "4.5.0" - mdast-util-to-hast "10.0.1" - remark-footnotes "2.0.0" - remark-mdx "1.6.22" + mdast-util-to-hast "9.1.0" + remark-footnotes "1.0.0" + remark-mdx "1.6.16" remark-parse "8.0.3" remark-squeeze-paragraphs "4.0.0" style-to-object "0.3.0" - unified "9.2.0" + unified "9.1.0" unist-builder "2.0.3" unist-util-visit "2.0.3" "@mdx-js/react@^1.6.16": - version "1.6.22" - resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.6.22.tgz#ae09b4744fddc74714ee9f9d6f17a66e77c43573" - integrity sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg== + version "1.6.16" + resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.6.16.tgz#538eb14473194d0b3c54020cb230e426174315cd" + integrity sha512-+FhuSVOPo7+4fZaRwWuCSRUcZkJOkZu0rfAbBKvoCg1LWb1Td8Vzi0DTLORdSvgWNbU6+EL40HIgwTOs00x2Jw== + +"@mdx-js/util@1.6.16": + version "1.6.16" + resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-1.6.16.tgz#07a7342f6b61ea1ecbfb31e6e23bf7a8c79b9b57" + integrity sha512-SFtLGIGZummuyMDPRL5KdmpgI8U19Ble28UjEWihPjGxF1Lgj8aDjLWY8KiaUy9eqb9CKiVCqEIrK9jbnANfkw== "@mdx-js/util@1.6.22": version "1.6.22" @@ -6617,13 +6609,13 @@ babel-plugin-add-module-exports@^1.0.4: resolved "https://registry.yarnpkg.com/babel-plugin-add-module-exports/-/babel-plugin-add-module-exports-1.0.4.tgz#6caa4ddbe1f578c6a5264d4d3e6c8a2720a7ca2b" integrity sha512-g+8yxHUZ60RcyaUpfNzy56OtWW+x9cyEe9j+CranqLiqbju2yf/Cy6ZtYK40EZxtrdHllzlVZgLmcOUCTlJ7Jg== -babel-plugin-apply-mdx-type-prop@1.6.22: - version "1.6.22" - resolved "https://registry.yarnpkg.com/babel-plugin-apply-mdx-type-prop/-/babel-plugin-apply-mdx-type-prop-1.6.22.tgz#d216e8fd0de91de3f1478ef3231e05446bc8705b" - integrity sha512-VefL+8o+F/DfK24lPZMtJctrCVOfgbqLAGZSkxwhazQv4VxPg3Za/i40fu22KR2m8eEda+IfSOlPLUSIiLcnCQ== +babel-plugin-apply-mdx-type-prop@1.6.16: + version "1.6.16" + resolved "https://registry.yarnpkg.com/babel-plugin-apply-mdx-type-prop/-/babel-plugin-apply-mdx-type-prop-1.6.16.tgz#4becd65b3aa108f15c524a0b125ca7c81f3443d8" + integrity sha512-hjUd24Yhnr5NKtHpC2mcRBGjC6RUKGzSzjN9g5SdjT4WpL/JDlpmjyBf7vWsJJSXFvMIbzRyxF4lT9ukwOnj/w== dependencies: "@babel/helper-plugin-utils" "7.10.4" - "@mdx-js/util" "1.6.22" + "@mdx-js/util" "1.6.16" babel-plugin-codegen@^4.1.0: version "4.1.4" @@ -6646,10 +6638,10 @@ babel-plugin-dynamic-import-node@^2.3.3: dependencies: object.assign "^4.1.0" -babel-plugin-extract-import-names@1.6.22: - version "1.6.22" - resolved "https://registry.yarnpkg.com/babel-plugin-extract-import-names/-/babel-plugin-extract-import-names-1.6.22.tgz#de5f9a28eb12f3eb2578bf74472204e66d1a13dc" - integrity sha512-yJ9BsJaISua7d8zNT7oRG1ZLBJCIdZ4PZqmH8qa9N5AK01ifk3fnkc98AXhtzE7UkfCsEumvoQWgoYLhOnJ7jQ== +babel-plugin-extract-import-names@1.6.16: + version "1.6.16" + resolved "https://registry.yarnpkg.com/babel-plugin-extract-import-names/-/babel-plugin-extract-import-names-1.6.16.tgz#b964004e794bdd62534c525db67d9e890d5cc079" + integrity sha512-Da6Ra0sbA/1Iavli8LdMbTjyrsOPaxMm4lrKl8VJN4sJI5F64qy2EpLj3+5INLvNPfW4ddwpStbfP3Rf3jIgcw== dependencies: "@babel/helper-plugin-utils" "7.10.4" @@ -9718,14 +9710,7 @@ destroy@~1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80" -detab@2.0.4: - version "2.0.4" - resolved "https://registry.yarnpkg.com/detab/-/detab-2.0.4.tgz#b927892069aff405fbb9a186fe97a44a92a94b43" - integrity sha512-8zdsQA5bIkoRECvCrNKPla84lyoR7DSAyf7p0YgXzBO9PDJx8KntPUay7NS6yp+KdxdVtiE5SpHKtbp2ZQyA9g== - dependencies: - repeat-string "^1.5.4" - -detab@^2.0.0: +detab@2.0.3, detab@^2.0.0: version "2.0.3" resolved "https://registry.yarnpkg.com/detab/-/detab-2.0.3.tgz#33e5dd74d230501bd69985a0d2b9a3382699a130" integrity sha512-Up8P0clUVwq0FnFjDclzZsy9PadzRn5FFxrr47tQQvMHqyiFYVbpH8oXDzWtF0Q7pYy3l+RPmtBl+BsFF6wH0A== @@ -12666,9 +12651,9 @@ graphql@^15.7.2, graphql@^15.8.0: integrity sha512-5gghUc24tP9HRznNpV2+FIoq3xKkj5dTQqf4v0CpdPbFVwFkWoxOM+o+2OC9ZSvjEMTjfmG9QT+gcvggTwW1zw== graphql@^16.3.0: - version "16.5.0" - resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.5.0.tgz#41b5c1182eaac7f3d47164fb247f61e4dfb69c85" - integrity sha512-qbHgh8Ix+j/qY+a/ZcJnFQ+j8ezakqPiHwPiZhV/3PgGlgf96QMBB5/f2rkiC9sgLoy/xvT6TSiaf2nTHJh5iA== + version "16.3.0" + resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.3.0.tgz#a91e24d10babf9e60c706919bb182b53ccdffc05" + integrity sha512-xm+ANmA16BzCT5pLjuXySbQVFwH3oJctUVdy81w1sV0vBU0KgDdBGtxQOUd5zqOBk/JayAFeG8Dlmeq74rjm/A== gray-matter@^2.1.0: version "2.1.1" @@ -12895,10 +12880,10 @@ hast-util-parse-selector@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.0.tgz#2175f18cdd697308fc3431d5c29a9e48dfa4817a" -hast-util-raw@6.0.1: - version "6.0.1" - resolved "https://registry.yarnpkg.com/hast-util-raw/-/hast-util-raw-6.0.1.tgz#973b15930b7529a7b66984c98148b46526885977" - integrity sha512-ZMuiYA+UF7BXBtsTBNcLBF5HzXzkyE6MLzJnL605LKE8GJylNjGc4jjxazAHUtcwT5/CEt6afRKViYB4X66dig== +hast-util-raw@6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/hast-util-raw/-/hast-util-raw-6.0.0.tgz#49a38f5107d483f83a139709f2f705f22e7e7d32" + integrity sha512-IQo6tv3bMMKxk53DljswliucCJOQxaZFCuKEJ7X80249dmJ1nA9LtOnnylsLlqTG98NjQ+iGcoLAYo9q5FRhRg== dependencies: "@types/hast" "^2.0.0" hast-util-from-parse5 "^6.0.0" @@ -16590,6 +16575,13 @@ mdast-util-definitions@^1.2.0: dependencies: unist-util-visit "^1.0.0" +mdast-util-definitions@^3.0.0: + version "3.0.1" + resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-3.0.1.tgz#06af6c49865fc63d6d7d30125569e2f7ae3d0a86" + integrity sha512-BAv2iUm/e6IK/b2/t+Fx69EL/AGcq/IG2S+HxHjDJGfLJtd6i9SZUS76aC9cig+IEucsqxKTR0ot3m933R3iuA== + dependencies: + unist-util-visit "^2.0.0" + mdast-util-definitions@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-4.0.0.tgz#c5c1a84db799173b4dcf7643cda999e440c24db2" @@ -16694,15 +16686,18 @@ mdast-util-math@^0.1.0: mdast-util-to-markdown "^0.6.0" repeat-string "^1.0.0" -mdast-util-to-hast@10.0.1: - version "10.0.1" - resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-10.0.1.tgz#0cfc82089494c52d46eb0e3edb7a4eb2aea021eb" - integrity sha512-BW3LM9SEMnjf4HXXVApZMt8gLQWVNXc3jryK0nJu/rOXPOnlkUjmdkDlmxMirpbU9ILncGFIwLH/ubnWBbcdgA== +mdast-util-to-hast@9.1.0: + version "9.1.0" + resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-9.1.0.tgz#6ef121dd3cd3b006bf8650b1b9454da0faf79ffe" + integrity sha512-Akl2Vi9y9cSdr19/Dfu58PVwifPXuFt1IrHe7l+Crme1KvgUT+5z+cHLVcQVGCiNTZZcdqjnuv9vPkGsqWytWA== dependencies: "@types/mdast" "^3.0.0" - "@types/unist" "^2.0.0" - mdast-util-definitions "^4.0.0" + "@types/unist" "^2.0.3" + collapse-white-space "^1.0.0" + detab "^2.0.0" + mdast-util-definitions "^3.0.0" mdurl "^1.0.0" + trim-lines "^1.0.0" unist-builder "^2.0.0" unist-util-generated "^1.0.0" unist-util-position "^3.0.0" @@ -20958,10 +20953,10 @@ remark-custom-blocks@^2.5.1: dependencies: space-separated-tokens "^1.1.5" -remark-footnotes@2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/remark-footnotes/-/remark-footnotes-2.0.0.tgz#9001c4c2ffebba55695d2dd80ffb8b82f7e6303f" - integrity sha512-3Clt8ZMH75Ayjp9q4CorNeyjwIxHFcTkaektplKGl2A1jNGEUey8cKL0ZC5vJwfcD5GFGsNLImLG/NGzWIzoMQ== +remark-footnotes@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/remark-footnotes/-/remark-footnotes-1.0.0.tgz#9c7a97f9a89397858a50033373020b1ea2aad011" + integrity sha512-X9Ncj4cj3/CIvLI2Z9IobHtVi8FVdUrdJkCNaL9kdX8ohfsi18DXHsCVd/A7ssARBdccdDb5ODnt62WuEWaM/g== remark-footnotes@^3.0.0: version "3.0.0" @@ -21531,7 +21526,21 @@ remark-math@^4.0.0: mdast-util-math "^0.1.0" micromark-extension-math "^0.1.0" -remark-mdx@1.6.22, remark-mdx@^1.6.22: +remark-mdx@1.6.16: + version "1.6.16" + resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-1.6.16.tgz#13ee40ad0614a1cc179aca3604d7f1b79e498a2f" + integrity sha512-xqZhBQ4TonFiSFpVt6SnTLRnxstu7M6pcaOibKZhqzk4zMRVacVenD7iECjfESK+72LkPm/NW+0r5ahJAg7zlQ== + dependencies: + "@babel/core" "7.10.5" + "@babel/helper-plugin-utils" "7.10.4" + "@babel/plugin-proposal-object-rest-spread" "7.10.4" + "@babel/plugin-syntax-jsx" "7.10.4" + "@mdx-js/util" "1.6.16" + is-alphabetical "1.0.4" + remark-parse "8.0.3" + unified "9.1.0" + +remark-mdx@^1.6.22: version "1.6.22" resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-1.6.22.tgz#06a8dab07dcfdd57f3373af7f86bd0e992108bbd" integrity sha512-phMHBJgeV76uyFkH4rvzCftLfKCr2RZuF+/gmVcaKrpsihyzmhXjA0BEMDaPTXG5y8qZOKPVo83NAOX01LPnOQ== @@ -24758,16 +24767,11 @@ typedarray@^0.0.6, typedarray@~0.0.5: version "0.0.6" resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" -typescript@^4.1.3, typescript@^4.6.4: +typescript@^4.1.3, typescript@^4.6.3, typescript@^4.6.4: version "4.6.4" resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.4.tgz#caa78bbc3a59e6a5c510d35703f6a09877ce45e9" integrity sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg== -typescript@^4.6.3: - version "4.6.3" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.3.tgz#eefeafa6afdd31d725584c67a0eaba80f6fc6c6c" - integrity sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw== - typography-normalize@^0.16.19: version "0.16.19" resolved "https://registry.yarnpkg.com/typography-normalize/-/typography-normalize-0.16.19.tgz#58e0cf12466870c5b27006daa051fe7307780660" @@ -24938,6 +24942,18 @@ unified-message-control@^3.0.0: unist-util-visit "^2.0.0" vfile-location "^3.0.0" +unified@9.1.0: + version "9.1.0" + resolved "https://registry.yarnpkg.com/unified/-/unified-9.1.0.tgz#7ba82e5db4740c47a04e688a9ca8335980547410" + integrity sha512-VXOv7Ic6twsKGJDeZQ2wwPqXs2hM0KNu5Hkg9WgAZbSD1pxhZ7p8swqg583nw1Je2fhwHy6U8aEjiI79x1gvag== + dependencies: + bail "^1.0.0" + extend "^3.0.0" + is-buffer "^2.0.0" + is-plain-obj "^2.0.0" + trough "^1.0.0" + vfile "^4.0.0" + unified@9.2.0: version "9.2.0" resolved "https://registry.yarnpkg.com/unified/-/unified-9.2.0.tgz#67a62c627c40589edebbf60f53edfd4d822027f8" @@ -25156,9 +25172,9 @@ unist-util-remove@^1.0.3: unist-util-is "^3.0.0" unist-util-remove@^2.0.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/unist-util-remove/-/unist-util-remove-2.1.0.tgz#b0b4738aa7ee445c402fda9328d604a02d010588" - integrity sha512-J8NYPyBm4baYLdCbjmf1bhPu45Cr1MWTm77qd9istEkzWpnN6O9tMsEbB2JhNnBCqGENRqEWomQ+He6au0B27Q== + version "2.0.0" + resolved "https://registry.yarnpkg.com/unist-util-remove/-/unist-util-remove-2.0.0.tgz#32c2ad5578802f2ca62ab808173d505b2c898488" + integrity sha512-HwwWyNHKkeg/eXRnE11IpzY8JT55JNM1YCwwU9YNCnfzk6s8GhPXrVBBZWiwLeATJbI7euvoGSzcy9M29UeW3g== dependencies: unist-util-is "^4.0.0" From fe2f1419dc8525fcd640f2babe5648c9cab4752f Mon Sep 17 00:00:00 2001 From: tyhopp Date: Tue, 10 May 2022 18:21:25 +0800 Subject: [PATCH 26/63] Update load plugins snapshots once more --- .../__tests__/__snapshots__/load-plugins.ts.snap | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/gatsby/src/bootstrap/load-plugins/__tests__/__snapshots__/load-plugins.ts.snap b/packages/gatsby/src/bootstrap/load-plugins/__tests__/__snapshots__/load-plugins.ts.snap index 79c2d4f7a1343..e78a8f7554ea1 100644 --- a/packages/gatsby/src/bootstrap/load-plugins/__tests__/__snapshots__/load-plugins.ts.snap +++ b/packages/gatsby/src/bootstrap/load-plugins/__tests__/__snapshots__/load-plugins.ts.snap @@ -91,8 +91,8 @@ Array [ "id": "", "name": "functions", "nodeAPIs": Array [ - "onCreateDevServer", "onPreBootstrap", + "onCreateDevServer", ], "pluginOptions": Object { "plugins": Array [], @@ -438,8 +438,8 @@ Array [ "id": "", "name": "functions", "nodeAPIs": Array [ - "onCreateDevServer", "onPreBootstrap", + "onCreateDevServer", ], "pluginOptions": Object { "plugins": Array [], @@ -818,8 +818,8 @@ Array [ "id": "", "name": "functions", "nodeAPIs": Array [ - "onCreateDevServer", "onPreBootstrap", + "onCreateDevServer", ], "pluginOptions": Object { "plugins": Array [], From a1952de325f5a1d93024481d7335b2165c72d408 Mon Sep 17 00:00:00 2001 From: tyhopp Date: Tue, 10 May 2022 22:44:11 +0800 Subject: [PATCH 27/63] Fix strange Cypress ts issue by not importing from gatsby --- .../cypress/integration/inline-scripts.ts | 113 ++++++++---------- .../integration/scripts-with-sources.ts | 55 +++------ e2e-tests/gatsby-script/package.json | 2 +- 3 files changed, 71 insertions(+), 99 deletions(-) diff --git a/e2e-tests/gatsby-script/cypress/integration/inline-scripts.ts b/e2e-tests/gatsby-script/cypress/integration/inline-scripts.ts index 271972fd23610..88b28e0853cd8 100644 --- a/e2e-tests/gatsby-script/cypress/integration/inline-scripts.ts +++ b/e2e-tests/gatsby-script/cypress/integration/inline-scripts.ts @@ -1,4 +1,3 @@ -import { ScriptStrategy } from "gatsby" import { InlineScript } from "../../scripts" import { ResourceRecord, MarkRecord } from "../../records" @@ -31,12 +30,12 @@ beforeEach(() => { for (const { descriptor, inlineScriptType } of typesOfInlineScripts) { describe(`inline scripts set via ${descriptor}`, () => { - describe(`using the ${ScriptStrategy.postHydrate} strategy`, () => { + describe(`using the post-hydrate strategy`, () => { it(`should execute successfully`, () => { cy.visit(page) cy.getRecord( - `${ScriptStrategy.postHydrate}-${inlineScriptType}`, + `post-hydrate-${inlineScriptType}`, `success`, true ).should(`equal`, `true`) @@ -47,7 +46,7 @@ for (const { descriptor, inlineScriptType } of typesOfInlineScripts) { // Assert framework is loaded before inline script is executed cy.getRecord( - `${ScriptStrategy.postHydrate}-${inlineScriptType}`, + `post-hydrate-${inlineScriptType}`, MarkRecord.executeStart ).then(dangerouslySetExecuteStart => { cy.getRecord(`framework`, ResourceRecord.responseEnd).should( @@ -58,29 +57,27 @@ for (const { descriptor, inlineScriptType } of typesOfInlineScripts) { }) }) - describe(`using the ${ScriptStrategy.idle} strategy`, () => { + describe(`using the idle strategy`, () => { it(`should execute successfully`, () => { cy.visit(page) - cy.getRecord( - `${ScriptStrategy.idle}-${inlineScriptType}`, - `success`, - true - ).should(`equal`, `true`) + cy.getRecord(`idle-${inlineScriptType}`, `success`, true).should( + `equal`, + `true` + ) }) it(`should load before other strategies`, () => { cy.visit(page) - cy.getRecord( - `${ScriptStrategy.idle}-${inlineScriptType}`, - MarkRecord.executeStart - ).then(dangerouslySetExecuteStart => { - cy.getRecord( - `${ScriptStrategy.postHydrate}-${inlineScriptType}`, - MarkRecord.executeStart - ).should(`be.lessThan`, dangerouslySetExecuteStart) - }) + cy.getRecord(`idle-${inlineScriptType}`, MarkRecord.executeStart).then( + dangerouslySetExecuteStart => { + cy.getRecord( + `post-hydrate-${inlineScriptType}`, + MarkRecord.executeStart + ).should(`be.lessThan`, dangerouslySetExecuteStart) + } + ) }) }) @@ -92,15 +89,14 @@ for (const { descriptor, inlineScriptType } of typesOfInlineScripts) { .children() .should(`have.length`, 4) cy.getRecord( - `${ScriptStrategy.postHydrate}-${inlineScriptType}`, - `strategy`, - true - ).should(`equal`, ScriptStrategy.postHydrate) - cy.getRecord( - `${ScriptStrategy.idle}-${inlineScriptType}`, + `post-hydrate-${inlineScriptType}`, `strategy`, true - ).should(`equal`, ScriptStrategy.idle) + ).should(`equal`, `post-hydrate`) + cy.getRecord(`idle-${inlineScriptType}`, `strategy`, true).should( + `equal`, + `idle` + ) }) it(`should load only once after the page is refreshed`, () => { @@ -111,15 +107,14 @@ for (const { descriptor, inlineScriptType } of typesOfInlineScripts) { .children() .should(`have.length`, 4) cy.getRecord( - `${ScriptStrategy.postHydrate}-${inlineScriptType}`, - `strategy`, - true - ).should(`equal`, ScriptStrategy.postHydrate) - cy.getRecord( - `${ScriptStrategy.idle}-${inlineScriptType}`, + `post-hydrate-${inlineScriptType}`, `strategy`, true - ).should(`equal`, ScriptStrategy.idle) + ).should(`equal`, `post-hydrate`) + cy.getRecord(`idle-${inlineScriptType}`, `strategy`, true).should( + `equal`, + `idle` + ) }) it(`should load only once after anchor link navigation`, () => { @@ -131,15 +126,14 @@ for (const { descriptor, inlineScriptType } of typesOfInlineScripts) { .children() .should(`have.length`, 4) cy.getRecord( - `${ScriptStrategy.postHydrate}-${inlineScriptType}`, - `strategy`, - true - ).should(`equal`, ScriptStrategy.postHydrate) - cy.getRecord( - `${ScriptStrategy.idle}-${inlineScriptType}`, + `post-hydrate-${inlineScriptType}`, `strategy`, true - ).should(`equal`, ScriptStrategy.idle) + ).should(`equal`, `post-hydrate`) + cy.getRecord(`idle-${inlineScriptType}`, `strategy`, true).should( + `equal`, + `idle` + ) }) it(`should load only once if the page is revisited via browser back/forward buttons after anchor link navigation`, () => { @@ -152,15 +146,14 @@ for (const { descriptor, inlineScriptType } of typesOfInlineScripts) { .children() .should(`have.length`, 4) cy.getRecord( - `${ScriptStrategy.postHydrate}-${inlineScriptType}`, - `strategy`, - true - ).should(`equal`, ScriptStrategy.postHydrate) - cy.getRecord( - `${ScriptStrategy.idle}-${inlineScriptType}`, + `post-hydrate-${inlineScriptType}`, `strategy`, true - ).should(`equal`, ScriptStrategy.idle) + ).should(`equal`, `post-hydrate`) + cy.getRecord(`idle-${inlineScriptType}`, `strategy`, true).should( + `equal`, + `idle` + ) }) it(`should load only once after Gatsby link navigation`, () => { @@ -172,15 +165,14 @@ for (const { descriptor, inlineScriptType } of typesOfInlineScripts) { .children() .should(`have.length`, 4) cy.getRecord( - `${ScriptStrategy.postHydrate}-${inlineScriptType}`, + `post-hydrate-${inlineScriptType}`, `strategy`, true - ).should(`equal`, ScriptStrategy.postHydrate) - cy.getRecord( - `${ScriptStrategy.idle}-${inlineScriptType}`, - `strategy`, - true - ).should(`equal`, ScriptStrategy.idle) + ).should(`equal`, `post-hydrate`) + cy.getRecord(`idle-${inlineScriptType}`, `strategy`, true).should( + `equal`, + `idle` + ) }) it(`should load only once if the page is revisited via browser back/forward buttons after Gatsby link navigation`, () => { @@ -193,15 +185,14 @@ for (const { descriptor, inlineScriptType } of typesOfInlineScripts) { .children() .should(`have.length`, 4) cy.getRecord( - `${ScriptStrategy.postHydrate}-${inlineScriptType}`, - `strategy`, - true - ).should(`equal`, ScriptStrategy.postHydrate) - cy.getRecord( - `${ScriptStrategy.idle}-${inlineScriptType}`, + `post-hydrate-${inlineScriptType}`, `strategy`, true - ).should(`equal`, ScriptStrategy.idle) + ).should(`equal`, `post-hydrate`) + cy.getRecord(`idle-${inlineScriptType}`, `strategy`, true).should( + `equal`, + `idle` + ) }) }) }) diff --git a/e2e-tests/gatsby-script/cypress/integration/scripts-with-sources.ts b/e2e-tests/gatsby-script/cypress/integration/scripts-with-sources.ts index 083f2901b6635..5a307c71ffac6 100644 --- a/e2e-tests/gatsby-script/cypress/integration/scripts-with-sources.ts +++ b/e2e-tests/gatsby-script/cypress/integration/scripts-with-sources.ts @@ -1,4 +1,3 @@ -import { ScriptStrategy } from "gatsby" import { Script, scripts } from "../../scripts" import { ResourceRecord } from "../../records" @@ -17,7 +16,7 @@ beforeEach(() => { }) describe(`scripts with sources`, () => { - describe(`using the ${ScriptStrategy.postHydrate} strategy`, () => { + describe(`using the post-hydrate strategy`, () => { it(`should load successfully`, () => { cy.visit(page) cy.getRecord(Script.three, `success`, true).should(`equal`, `true`) @@ -40,17 +39,17 @@ describe(`scripts with sources`, () => { it(`should call an on load callback once the script has loaded`, () => { cy.visit(page) cy.getRecord(Script.three, ResourceRecord.responseEnd).then(() => { - cy.get(`[data-on-load-result=${ScriptStrategy.postHydrate}]`) + cy.get(`[data-on-load-result=post-hydrate]`) }) }) it(`should call an on error callback if an error occurred`, () => { cy.visit(page) - cy.get(`[data-on-error-result=${ScriptStrategy.postHydrate}]`) + cy.get(`[data-on-error-result=post-hydrate]`) }) }) - describe(`using the ${ScriptStrategy.idle} strategy`, () => { + describe(`using the idle strategy`, () => { it(`should load successfully`, () => { cy.visit(page) cy.getRecord(Script.marked, `success`, true).should(`equal`, `true`) @@ -72,13 +71,13 @@ describe(`scripts with sources`, () => { it(`should call an on load callback once the script has loaded`, () => { cy.visit(page) cy.getRecord(Script.marked, ResourceRecord.responseEnd).then(() => { - cy.get(`[data-on-load-result=${ScriptStrategy.idle}]`) + cy.get(`[data-on-load-result=idle]`) }) }) it(`should call an on error callback if an error occurred`, () => { cy.visit(page) - cy.get(`[data-on-error-result=${ScriptStrategy.idle}]`) + cy.get(`[data-on-error-result=idle]`) }) }) @@ -91,12 +90,9 @@ describe(`scripts with sources`, () => { .should(`have.length`, 3) cy.getRecord(Script.three, `strategy`, true).should( `equal`, - ScriptStrategy.postHydrate - ) - cy.getRecord(Script.marked, `strategy`, true).should( - `equal`, - ScriptStrategy.idle + `post-hydrate` ) + cy.getRecord(Script.marked, `strategy`, true).should(`equal`, `idle`) }) it(`should load only once after the page is refreshed`, () => { @@ -108,12 +104,9 @@ describe(`scripts with sources`, () => { .should(`have.length`, 3) cy.getRecord(Script.three, `strategy`, true).should( `equal`, - ScriptStrategy.postHydrate - ) - cy.getRecord(Script.marked, `strategy`, true).should( - `equal`, - ScriptStrategy.idle + `post-hydrate` ) + cy.getRecord(Script.marked, `strategy`, true).should(`equal`, `idle`) }) it(`should load only once after anchor link navigation`, () => { @@ -126,12 +119,9 @@ describe(`scripts with sources`, () => { .should(`have.length`, 3) cy.getRecord(Script.three, `strategy`, true).should( `equal`, - ScriptStrategy.postHydrate - ) - cy.getRecord(Script.marked, `strategy`, true).should( - `equal`, - ScriptStrategy.idle + `post-hydrate` ) + cy.getRecord(Script.marked, `strategy`, true).should(`equal`, `idle`) }) it(`should load only once if the page is revisited via browser back/forward buttons after anchor link navigation`, () => { @@ -145,12 +135,9 @@ describe(`scripts with sources`, () => { .should(`have.length`, 3) cy.getRecord(Script.three, `strategy`, true).should( `equal`, - ScriptStrategy.postHydrate - ) - cy.getRecord(Script.marked, `strategy`, true).should( - `equal`, - ScriptStrategy.idle + `post-hydrate` ) + cy.getRecord(Script.marked, `strategy`, true).should(`equal`, `idle`) }) it(`should load only once after Gatsby link navigation`, () => { @@ -163,12 +150,9 @@ describe(`scripts with sources`, () => { .should(`have.length`, 3) cy.getRecord(Script.three, `strategy`, true).should( `equal`, - ScriptStrategy.postHydrate - ) - cy.getRecord(Script.marked, `strategy`, true).should( - `equal`, - ScriptStrategy.idle + `post-hydrate` ) + cy.getRecord(Script.marked, `strategy`, true).should(`equal`, `idle`) }) it(`should load only once if the page is revisited via browser back/forward buttons after Gatsby link navigation`, () => { @@ -182,12 +166,9 @@ describe(`scripts with sources`, () => { .should(`have.length`, 3) cy.getRecord(Script.three, `strategy`, true).should( `equal`, - ScriptStrategy.postHydrate - ) - cy.getRecord(Script.marked, `strategy`, true).should( - `equal`, - ScriptStrategy.idle + `post-hydrate` ) + cy.getRecord(Script.marked, `strategy`, true).should(`equal`, `idle`) }) }) }) diff --git a/e2e-tests/gatsby-script/package.json b/e2e-tests/gatsby-script/package.json index 6ef72e369e7b9..da648367f4d84 100644 --- a/e2e-tests/gatsby-script/package.json +++ b/e2e-tests/gatsby-script/package.json @@ -5,7 +5,7 @@ "author": "Ty Hopp ", "dependencies": { "cypress": "^9.1.1", - "gatsby": "next", + "gatsby": "4.15.0-alpha-gatsby-script.22", "react": "^17.0.2", "react-dom": "^17.0.2" }, From 6541f6784bd8c849f77fbe0f9854018602b4f1ce Mon Sep 17 00:00:00 2001 From: tyhopp Date: Thu, 12 May 2022 10:15:43 +0800 Subject: [PATCH 28/63] Remove docs to be added in separate PR prior to release --- .../built-in-components/gatsby-script.md | 196 ------------------ 1 file changed, 196 deletions(-) delete mode 100644 docs/docs/reference/built-in-components/gatsby-script.md diff --git a/docs/docs/reference/built-in-components/gatsby-script.md b/docs/docs/reference/built-in-components/gatsby-script.md deleted file mode 100644 index 4b696181f9d46..0000000000000 --- a/docs/docs/reference/built-in-components/gatsby-script.md +++ /dev/null @@ -1,196 +0,0 @@ ---- -title: Gatsby Script API ---- - -Gatsby includes a built-in ` -``` - -Functionally, both of these ways of defining inline scripts are equivalent. - -## Strategies - -You can declare a loading strategy by passing a `strategy` property. These are the available loading strategies: - -- `post-hydrate` - Loads after the page has hydrated -- `idle` - Loads after the page has become idle -- `off-main-thread` - Loads off the main thread in a web worker via [Partytown](https://partytown.builder.io) - -The best strategy to use depends on the functionality of the script you would like to include. - -A general rule of thumb is if your script can afford to be loaded later (as many analytics scripts can be), then start with `off-main-thread` or `idle` and move to earlier loading strategies if necessary. - -Here's how you can define these strategies in the ` -``` - -See the [Gatsby blog post on the topic](https://www.gatsbyjs.com/blog/how-to-add-google-analytics-gtag-to-gatsby-using-partytown/) for more context. - -#### Forward collection - -Gatsby will collect all `off-main-thread` scripts on a page, and automatically merge any [Partytown forwarded events](https://partytown.builder.io/forwarding-events) into a single configuration for each page. - -There's nothing you need to do to make this work, but it is useful to be aware of in case you have an advanced use case. - -#### Proxying requests - -One challenge of using Partytown under the hood is [proxying requests](https://partytown.builder.io/proxying-requests). The nature of loading scripts in a web worker means that the script's response requires the correct CORS headers, and not all third party scripts provide them. - -Gatsby solves this for you out of the box when running your site via `gatsby develop`, `gatsby serve`, and when your site is deployed with [Gatsby Cloud](https://www.gatsbyjs.com/products/cloud/). - -In practice, this means that you should not have to configure your own URL reverse proxy for most use cases. - -Hosting on other providers may require you to implement the reverse proxy solution [as described in the Partytown documentation](https://partytown.builder.io/proxying-requests) depending on your third-party script. - -#### Trade-offs - -By leveraging [Partytown](https://partytown.builder.io), scripts that use the `off-main-thread` strategy must also be aware of the [trade-offs 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. - -In addition: - -- `off-main-thread` scripts load only on server-side render (e.g. initial page render, page reload, etc.) and not on client-side render (e.g. navigation via Gatsby Link) -- `off-main-thread` scripts cannot use the `onLoad` and `onError` callbacks - -### `onLoad` and `onError` callbacks - -Scripts with sources loaded with the `post-hydrate` or `idle` strategies have access to two callbacks: - -- `onLoad` - Called once the script has loaded -- `onError` - Called if the script failed to load - -> Note - Inline scripts and scripts using the `off-main-thread` strategy **do not** support the `onLoad` and `onError` callbacks. - -Here is an example using the callbacks: - -```tsx - + dangerouslySetInnerHTML={{ __html: resolveInlineScript(props) }} + /> ) } return ( From 7ad4d0a47ac9747952410b09bdd3cb2b7a9a77f4 Mon Sep 17 00:00:00 2001 From: tyhopp Date: Thu, 12 May 2022 11:33:30 +0800 Subject: [PATCH 31/63] Refactor forward collection logic --- .../internal-plugins/partytown/gatsby-ssr.tsx | 25 ++++++++----------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/packages/gatsby/src/internal-plugins/partytown/gatsby-ssr.tsx b/packages/gatsby/src/internal-plugins/partytown/gatsby-ssr.tsx index 90d8aac59bb82..917d62e94fff2 100644 --- a/packages/gatsby/src/internal-plugins/partytown/gatsby-ssr.tsx +++ b/packages/gatsby/src/internal-plugins/partytown/gatsby-ssr.tsx @@ -4,7 +4,7 @@ import { Partytown } from "@builder.io/partytown/react" import { PartytownContext } from "gatsby-script" import type { PartytownProps } from "@builder.io/partytown/react" -const collectedScripts: Record> = {} +const collectedScripts: Map> = new Map() export const wrapRootElement: GatsbySSR[`wrapRootElement`] = ({ element, @@ -13,10 +13,9 @@ export const wrapRootElement: GatsbySSR[`wrapRootElement`] = ({ { - collectedScripts[pathname] = [ - ...(collectedScripts?.[pathname] || []), - newScript, - ] + const currentCollectedScripts = collectedScripts.get(pathname) || [] + currentCollectedScripts.push(newScript) + collectedScripts.set(pathname, currentCollectedScripts) }, }} > @@ -28,19 +27,17 @@ export const onRenderBody: GatsbySSR[`onRenderBody`] = ({ pathname, setHeadComponents, }) => { - if (!collectedScripts?.[pathname]?.length) { + const collectedScriptsOnPage = collectedScripts.get(pathname) + + if (!collectedScriptsOnPage?.length) { return } - const collectedForwards: Array = collectedScripts?.[pathname]?.reduce( - (forwards: Array, script: PartytownProps) => { - if (script?.forward) { - forwards = [...forwards, ...script?.forward] - } - return forwards - }, - [] + const collectedForwards: Array = collectedScriptsOnPage?.flatMap( + (script: PartytownProps) => script?.forward || [] ) setHeadComponents([]) + + collectedScripts.delete(pathname) } From ef69210e53027d68202b49541e77de7fad191c80 Mon Sep 17 00:00:00 2001 From: tyhopp Date: Thu, 12 May 2022 12:12:23 +0800 Subject: [PATCH 32/63] Bump gatsby-script --- packages/gatsby-script/package.json | 2 +- packages/gatsby/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/gatsby-script/package.json b/packages/gatsby-script/package.json index a700676862581..603c505ea4578 100644 --- a/packages/gatsby-script/package.json +++ b/packages/gatsby-script/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-script", "description": "An enhanced script component for Gatsby sites with support for various loading strategies", - "version": "1.0.0-next.1", + "version": "1.0.0-next.2", "author": "Ty Hopp ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" diff --git a/packages/gatsby/package.json b/packages/gatsby/package.json index 8c21ace168166..2beb534589cc3 100644 --- a/packages/gatsby/package.json +++ b/packages/gatsby/package.json @@ -98,7 +98,7 @@ "gatsby-plugin-typescript": "^4.15.0-next.0", "gatsby-plugin-utils": "^3.9.0-next.0", "gatsby-react-router-scroll": "^5.15.0-next.0", - "gatsby-script": "1.0.0-next.1", + "gatsby-script": "1.0.0-next.2", "gatsby-telemetry": "^3.15.0-next.0", "gatsby-worker": "^1.15.0-next.0", "glob": "^7.2.0", From f4ea3201c5d8cee48050b169f06fe01411450364 Mon Sep 17 00:00:00 2001 From: tyhopp Date: Wed, 11 May 2022 10:45:37 +0800 Subject: [PATCH 33/63] feat(gatsby-script): Default proxy safelist --- .../internal-plugins/partytown/gatsby-node.ts | 49 ++++++++++++------- 1 file changed, 32 insertions(+), 17 deletions(-) diff --git a/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts b/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts index 25a8c8c62ef12..f9ffd10896e38 100644 --- a/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts +++ b/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts @@ -1,29 +1,44 @@ import path from "path" import { copyLibFiles } from "@builder.io/partytown/utils" +/** + * List of trusted hosts proxied by default. Extracted from Partytown integration tests. + * @see {@link https://github.com/BuilderIO/partytown/tree/main/tests/integrations} + */ +const proxyHostDefaultSafelist: Array = [ + `assets.adobedtm.com`, + `connect.facebook.net`, + `www.google-analytics.com`, + `www.googletagmanager.com`, + `forms.hsforms.com`, // HubSpot + `widget.intercom.io`, + `syndication.twitter.com`, + `cdn.syndication.twimg.com`, // Twitter +] + exports.onPreBootstrap = async ({ store }): Promise => { const { program } = store.getState() await copyLibFiles(path.join(program.directory, `public`, `~partytown`)) } +/** + * Implement reverse proxy so scripts can fetch in web workers without CORS errors. + * @see {@link https://partytown.builder.io/proxying-requests} + */ exports.createPages = ({ actions }): void => { const { createRedirect } = actions - /** - * TODO - Consider the security implications of including a reverse proxy like this. - * - * If we can't find a way to ensure this isn't exploited then we should scrap it - * and point users to Partytown docs so that they can solve for their scenarios as needed. - * - * @see {@link https://partytown.builder.io/proxying-requests} - */ - createRedirect({ - fromPath: `/__partytown-proxy?url=:url`, - toPath: `:url`, - statusCode: 200, - headers: { - // eslint-disable-next-line @typescript-eslint/naming-convention - "/__partytown-proxy": [`Access-Control-Allow-Origin: *`], - }, - }) + for (const host of proxyHostDefaultSafelist) { + const encodedURL: string = encodeURI(`https://${host}`) + + createRedirect({ + fromPath: `/__partytown-proxy?url=${encodedURL}`, + toPath: encodedURL, + statusCode: 200, + headers: { + // eslint-disable-next-line @typescript-eslint/naming-convention + "/__partytown-proxy": [`Access-Control-Allow-Origin: *`], + }, + }) + } } From b93e543b3739c640174a9b2547986fdc747c2e8a Mon Sep 17 00:00:00 2001 From: tyhopp Date: Wed, 11 May 2022 12:24:42 +0800 Subject: [PATCH 34/63] Gatsby serve support --- packages/gatsby/index.d.ts | 5 ++++ packages/gatsby/src/commands/serve.ts | 10 +++++++ .../partytown/default-proxied-hosts.ts | 14 ++++++++++ .../internal-plugins/partytown/gatsby-node.ts | 26 +++++++------------ packages/gatsby/src/joi-schemas/joi.ts | 1 + packages/gatsby/src/redux/types.ts | 1 + 6 files changed, 41 insertions(+), 16 deletions(-) create mode 100644 packages/gatsby/src/internal-plugins/partytown/default-proxied-hosts.ts diff --git a/packages/gatsby/index.d.ts b/packages/gatsby/index.d.ts index 3fbb747528bda..9f8f57173df3f 100644 --- a/packages/gatsby/index.d.ts +++ b/packages/gatsby/index.d.ts @@ -258,6 +258,11 @@ export interface GatsbyConfig { prefix: string url: string } + /** + * A list of trusted hosts that will be proxied for use with the gatsby-script off-main-thread strategy. + * @see https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-script/ + */ + partytownProxiedHosts?: Array /** Sometimes you need more granular/flexible access to the development server. Gatsby exposes the Express.js development server to your site’s gatsby-config.js where you can add Express middleware as needed. */ developMiddleware?(app: any): void } diff --git a/packages/gatsby/src/commands/serve.ts b/packages/gatsby/src/commands/serve.ts index ee6b41d331db3..0aaf4096b839d 100644 --- a/packages/gatsby/src/commands/serve.ts +++ b/packages/gatsby/src/commands/serve.ts @@ -26,6 +26,7 @@ import { configureTrailingSlash } from "../utils/express-middlewares" import { getDataStore, detectLmdbStore } from "../datastore" import { functionMiddlewares } from "../internal-plugins/functions/middleware" import proxy from "express-http-proxy" +import { partytownDefaultProxiedHosts } from "../internal-plugins/partytown/default-proxied-hosts" process.env.GATSBY_EXPERIMENTAL_LMDB_STORE = `1` detectLmdbStore() @@ -122,9 +123,18 @@ module.exports = async (program: IServeProgram): Promise => { const app = express() // Proxy gatsby-script using off-main-thread strategy + const { partytownProxiedHosts = [] } = config || {} + const hosts = [...partytownDefaultProxiedHosts, ...partytownProxiedHosts] + app.use( `/__partytown-proxy`, proxy(req => new URL(req.query.url as string).host as string, { + filter: req => + hosts.some(host => { + // TODO - Probably want to log a warning saying host is unsafe and how to add to config if desired + const queryParamHost = new URL(req.query.url as string).host as string + return queryParamHost === host + }), proxyReqPathResolver: req => { const { pathname = ``, search = `` } = new URL(req.query.url as string) return pathname + search diff --git a/packages/gatsby/src/internal-plugins/partytown/default-proxied-hosts.ts b/packages/gatsby/src/internal-plugins/partytown/default-proxied-hosts.ts new file mode 100644 index 0000000000000..f110372551030 --- /dev/null +++ b/packages/gatsby/src/internal-plugins/partytown/default-proxied-hosts.ts @@ -0,0 +1,14 @@ +/** + * List of trusted hosts proxied by default. Extracted from Partytown integration tests. + * @see {@link https://github.com/BuilderIO/partytown/tree/main/tests/integrations} + */ +export const partytownDefaultProxiedHosts: Array = [ + `assets.adobedtm.com`, // Adobe + `connect.facebook.net`, + `www.google-analytics.com`, + `www.googletagmanager.com`, + `forms.hsforms.com`, // HubSpot + `widget.intercom.io`, + `syndication.twitter.com`, + `cdn.syndication.twimg.com`, // Twitter +] diff --git a/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts b/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts index f9ffd10896e38..16916ce6a5a05 100644 --- a/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts +++ b/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts @@ -1,21 +1,11 @@ import path from "path" import { copyLibFiles } from "@builder.io/partytown/utils" +import { partytownDefaultProxiedHosts } from "./default-proxied-hosts" /** - * List of trusted hosts proxied by default. Extracted from Partytown integration tests. - * @see {@link https://github.com/BuilderIO/partytown/tree/main/tests/integrations} + * Copy Partytown library files to public. + * @see {@link https://partytown.builder.io/copy-library-files} */ -const proxyHostDefaultSafelist: Array = [ - `assets.adobedtm.com`, - `connect.facebook.net`, - `www.google-analytics.com`, - `www.googletagmanager.com`, - `forms.hsforms.com`, // HubSpot - `widget.intercom.io`, - `syndication.twitter.com`, - `cdn.syndication.twimg.com`, // Twitter -] - exports.onPreBootstrap = async ({ store }): Promise => { const { program } = store.getState() await copyLibFiles(path.join(program.directory, `public`, `~partytown`)) @@ -25,14 +15,18 @@ exports.onPreBootstrap = async ({ store }): Promise => { * Implement reverse proxy so scripts can fetch in web workers without CORS errors. * @see {@link https://partytown.builder.io/proxying-requests} */ -exports.createPages = ({ actions }): void => { +exports.createPages = ({ actions, store }): void => { const { createRedirect } = actions - for (const host of proxyHostDefaultSafelist) { + const { config = {} } = store.getState() + const { partytownProxiedHosts = [] } = config + const hosts = [...partytownDefaultProxiedHosts, ...partytownProxiedHosts] + + for (const host of hosts) { const encodedURL: string = encodeURI(`https://${host}`) createRedirect({ - fromPath: `/__partytown-proxy?url=${encodedURL}`, + fromPath: `/__partytown-proxy?url=${encodedURL}*`, toPath: encodedURL, statusCode: 200, headers: { diff --git a/packages/gatsby/src/joi-schemas/joi.ts b/packages/gatsby/src/joi-schemas/joi.ts index c652a13ccc9ab..8744d7a3b6cb8 100644 --- a/packages/gatsby/src/joi-schemas/joi.ts +++ b/packages/gatsby/src/joi-schemas/joi.ts @@ -48,6 +48,7 @@ export const gatsbyConfigSchema: Joi.ObjectSchema = Joi.object() }) ) .single(), + partytownProxiedHosts: Joi.array().items(Joi.string()), developMiddleware: Joi.func(), jsxRuntime: Joi.string().valid(`automatic`, `classic`).default(`classic`), jsxImportSource: Joi.string(), diff --git a/packages/gatsby/src/redux/types.ts b/packages/gatsby/src/redux/types.ts index 15b57c21aeda3..32ecc097fa33c 100644 --- a/packages/gatsby/src/redux/types.ts +++ b/packages/gatsby/src/redux/types.ts @@ -98,6 +98,7 @@ export interface IGatsbyConfig { polyfill?: boolean developMiddleware?: any proxy?: any + partytownProxiedHosts?: Array pathPrefix?: string assetPrefix?: string mapping?: Record From bf0cf5234b6c0597ae9f179a6c0a5d2fc6dff005 Mon Sep 17 00:00:00 2001 From: tyhopp Date: Wed, 11 May 2022 12:58:20 +0800 Subject: [PATCH 35/63] Remove wildcard --- packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts b/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts index 16916ce6a5a05..8b9668105b7c8 100644 --- a/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts +++ b/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts @@ -26,7 +26,7 @@ exports.createPages = ({ actions, store }): void => { const encodedURL: string = encodeURI(`https://${host}`) createRedirect({ - fromPath: `/__partytown-proxy?url=${encodedURL}*`, + fromPath: `/__partytown-proxy?url=${encodedURL}`, toPath: encodedURL, statusCode: 200, headers: { From 08fb41e1f355797475174b8b0839e0d88f30e4e3 Mon Sep 17 00:00:00 2001 From: tyhopp Date: Wed, 11 May 2022 14:39:08 +0800 Subject: [PATCH 36/63] Try colon syntax for rest of url --- packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts b/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts index 8b9668105b7c8..7e3e585e4f65e 100644 --- a/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts +++ b/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts @@ -26,8 +26,8 @@ exports.createPages = ({ actions, store }): void => { const encodedURL: string = encodeURI(`https://${host}`) createRedirect({ - fromPath: `/__partytown-proxy?url=${encodedURL}`, - toPath: encodedURL, + fromPath: `/__partytown-proxy?url=${encodedURL}:rest`, + toPath: `${encodedURL}:rest`, statusCode: 200, headers: { // eslint-disable-next-line @typescript-eslint/naming-convention From 97bedb1b711902dd8ea642d614b1c49735681c84 Mon Sep 17 00:00:00 2001 From: tyhopp Date: Wed, 11 May 2022 17:38:49 +0800 Subject: [PATCH 37/63] Pivot to absolute URLs --- packages/gatsby/src/commands/serve.ts | 3 +-- .../partytown/default-proxied-hosts.ts | 14 -------------- .../src/internal-plugins/partytown/gatsby-node.ts | 10 ++++------ 3 files changed, 5 insertions(+), 22 deletions(-) delete mode 100644 packages/gatsby/src/internal-plugins/partytown/default-proxied-hosts.ts diff --git a/packages/gatsby/src/commands/serve.ts b/packages/gatsby/src/commands/serve.ts index 0aaf4096b839d..f37e26dcccf12 100644 --- a/packages/gatsby/src/commands/serve.ts +++ b/packages/gatsby/src/commands/serve.ts @@ -124,13 +124,12 @@ module.exports = async (program: IServeProgram): Promise => { // Proxy gatsby-script using off-main-thread strategy const { partytownProxiedHosts = [] } = config || {} - const hosts = [...partytownDefaultProxiedHosts, ...partytownProxiedHosts] app.use( `/__partytown-proxy`, proxy(req => new URL(req.query.url as string).host as string, { filter: req => - hosts.some(host => { + partytownProxiedHosts.some(host => { // TODO - Probably want to log a warning saying host is unsafe and how to add to config if desired const queryParamHost = new URL(req.query.url as string).host as string return queryParamHost === host diff --git a/packages/gatsby/src/internal-plugins/partytown/default-proxied-hosts.ts b/packages/gatsby/src/internal-plugins/partytown/default-proxied-hosts.ts deleted file mode 100644 index f110372551030..0000000000000 --- a/packages/gatsby/src/internal-plugins/partytown/default-proxied-hosts.ts +++ /dev/null @@ -1,14 +0,0 @@ -/** - * List of trusted hosts proxied by default. Extracted from Partytown integration tests. - * @see {@link https://github.com/BuilderIO/partytown/tree/main/tests/integrations} - */ -export const partytownDefaultProxiedHosts: Array = [ - `assets.adobedtm.com`, // Adobe - `connect.facebook.net`, - `www.google-analytics.com`, - `www.googletagmanager.com`, - `forms.hsforms.com`, // HubSpot - `widget.intercom.io`, - `syndication.twitter.com`, - `cdn.syndication.twimg.com`, // Twitter -] diff --git a/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts b/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts index 7e3e585e4f65e..e8b44faca2355 100644 --- a/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts +++ b/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts @@ -1,6 +1,5 @@ import path from "path" import { copyLibFiles } from "@builder.io/partytown/utils" -import { partytownDefaultProxiedHosts } from "./default-proxied-hosts" /** * Copy Partytown library files to public. @@ -20,14 +19,13 @@ exports.createPages = ({ actions, store }): void => { const { config = {} } = store.getState() const { partytownProxiedHosts = [] } = config - const hosts = [...partytownDefaultProxiedHosts, ...partytownProxiedHosts] - for (const host of hosts) { - const encodedURL: string = encodeURI(`https://${host}`) + for (const host of partytownProxiedHosts) { + const encodedURL: string = encodeURI(host) createRedirect({ - fromPath: `/__partytown-proxy?url=${encodedURL}:rest`, - toPath: `${encodedURL}:rest`, + fromPath: `/__partytown-proxy?url=${encodedURL}`, + toPath: encodedURL, statusCode: 200, headers: { // eslint-disable-next-line @typescript-eslint/naming-convention From 8ccccb949faac966fba8f7837ae62a0b97b1a628 Mon Sep 17 00:00:00 2001 From: tyhopp Date: Wed, 11 May 2022 18:18:32 +0800 Subject: [PATCH 38/63] Rename config key to match absolute url approach --- packages/gatsby/index.d.ts | 4 ++-- packages/gatsby/src/commands/serve.ts | 4 ++-- packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts | 4 ++-- packages/gatsby/src/joi-schemas/joi.ts | 2 +- packages/gatsby/src/redux/types.ts | 2 +- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/gatsby/index.d.ts b/packages/gatsby/index.d.ts index 9f8f57173df3f..c9b0f99a09e41 100644 --- a/packages/gatsby/index.d.ts +++ b/packages/gatsby/index.d.ts @@ -259,10 +259,10 @@ export interface GatsbyConfig { url: string } /** - * A list of trusted hosts that will be proxied for use with the gatsby-script off-main-thread strategy. + * A list of trusted URLs that will be proxied for use with the gatsby-script off-main-thread strategy. * @see https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-script/ */ - partytownProxiedHosts?: Array + partytownProxiedURLs?: Array /** Sometimes you need more granular/flexible access to the development server. Gatsby exposes the Express.js development server to your site’s gatsby-config.js where you can add Express middleware as needed. */ developMiddleware?(app: any): void } diff --git a/packages/gatsby/src/commands/serve.ts b/packages/gatsby/src/commands/serve.ts index f37e26dcccf12..935d50d5857fc 100644 --- a/packages/gatsby/src/commands/serve.ts +++ b/packages/gatsby/src/commands/serve.ts @@ -123,13 +123,13 @@ module.exports = async (program: IServeProgram): Promise => { const app = express() // Proxy gatsby-script using off-main-thread strategy - const { partytownProxiedHosts = [] } = config || {} + const { partytownProxiedURLs = [] } = config || {} app.use( `/__partytown-proxy`, proxy(req => new URL(req.query.url as string).host as string, { filter: req => - partytownProxiedHosts.some(host => { + partytownProxiedURLs.some(host => { // TODO - Probably want to log a warning saying host is unsafe and how to add to config if desired const queryParamHost = new URL(req.query.url as string).host as string return queryParamHost === host diff --git a/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts b/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts index e8b44faca2355..15e989bb02717 100644 --- a/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts +++ b/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts @@ -18,9 +18,9 @@ exports.createPages = ({ actions, store }): void => { const { createRedirect } = actions const { config = {} } = store.getState() - const { partytownProxiedHosts = [] } = config + const { partytownProxiedURLs = [] } = config - for (const host of partytownProxiedHosts) { + for (const host of partytownProxiedURLs) { const encodedURL: string = encodeURI(host) createRedirect({ diff --git a/packages/gatsby/src/joi-schemas/joi.ts b/packages/gatsby/src/joi-schemas/joi.ts index 8744d7a3b6cb8..2b20272e7df76 100644 --- a/packages/gatsby/src/joi-schemas/joi.ts +++ b/packages/gatsby/src/joi-schemas/joi.ts @@ -48,7 +48,7 @@ export const gatsbyConfigSchema: Joi.ObjectSchema = Joi.object() }) ) .single(), - partytownProxiedHosts: Joi.array().items(Joi.string()), + partytownProxiedURLs: Joi.array().items(Joi.string()), developMiddleware: Joi.func(), jsxRuntime: Joi.string().valid(`automatic`, `classic`).default(`classic`), jsxImportSource: Joi.string(), diff --git a/packages/gatsby/src/redux/types.ts b/packages/gatsby/src/redux/types.ts index 32ecc097fa33c..1ee6aea1042b2 100644 --- a/packages/gatsby/src/redux/types.ts +++ b/packages/gatsby/src/redux/types.ts @@ -98,7 +98,7 @@ export interface IGatsbyConfig { polyfill?: boolean developMiddleware?: any proxy?: any - partytownProxiedHosts?: Array + partytownProxiedURLs?: Array pathPrefix?: string assetPrefix?: string mapping?: Record From 957f56ddee115d237daed4aa18a811c90d75e082 Mon Sep 17 00:00:00 2001 From: tyhopp Date: Wed, 11 May 2022 18:20:43 +0800 Subject: [PATCH 39/63] Remove unused import --- packages/gatsby/src/commands/serve.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/gatsby/src/commands/serve.ts b/packages/gatsby/src/commands/serve.ts index 935d50d5857fc..f7516045adc3b 100644 --- a/packages/gatsby/src/commands/serve.ts +++ b/packages/gatsby/src/commands/serve.ts @@ -26,7 +26,6 @@ import { configureTrailingSlash } from "../utils/express-middlewares" import { getDataStore, detectLmdbStore } from "../datastore" import { functionMiddlewares } from "../internal-plugins/functions/middleware" import proxy from "express-http-proxy" -import { partytownDefaultProxiedHosts } from "../internal-plugins/partytown/default-proxied-hosts" process.env.GATSBY_EXPERIMENTAL_LMDB_STORE = `1` detectLmdbStore() From a1d43f11e04698babad21d79b7a733100467ff8f Mon Sep 17 00:00:00 2001 From: tyhopp Date: Wed, 11 May 2022 19:08:41 +0800 Subject: [PATCH 40/63] Remove comment --- packages/gatsby/src/commands/serve.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/gatsby/src/commands/serve.ts b/packages/gatsby/src/commands/serve.ts index f7516045adc3b..154e712a25916 100644 --- a/packages/gatsby/src/commands/serve.ts +++ b/packages/gatsby/src/commands/serve.ts @@ -129,7 +129,6 @@ module.exports = async (program: IServeProgram): Promise => { proxy(req => new URL(req.query.url as string).host as string, { filter: req => partytownProxiedURLs.some(host => { - // TODO - Probably want to log a warning saying host is unsafe and how to add to config if desired const queryParamHost = new URL(req.query.url as string).host as string return queryParamHost === host }), From 2e4e189a71536b71a81a5db11d4bc5323506c8e0 Mon Sep 17 00:00:00 2001 From: tyhopp Date: Thu, 12 May 2022 10:06:38 +0800 Subject: [PATCH 41/63] Remove CORS header from proxy --- packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts b/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts index 15e989bb02717..f4d4ed7427173 100644 --- a/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts +++ b/packages/gatsby/src/internal-plugins/partytown/gatsby-node.ts @@ -27,10 +27,6 @@ exports.createPages = ({ actions, store }): void => { fromPath: `/__partytown-proxy?url=${encodedURL}`, toPath: encodedURL, statusCode: 200, - headers: { - // eslint-disable-next-line @typescript-eslint/naming-convention - "/__partytown-proxy": [`Access-Control-Allow-Origin: *`], - }, }) } } From 3c7d7d358de419ead04ca0dfc0dd1a13ec8da6af Mon Sep 17 00:00:00 2001 From: tyhopp Date: Thu, 12 May 2022 13:09:15 +0800 Subject: [PATCH 42/63] Strict URL matching in gatsby serve --- packages/gatsby/src/commands/serve.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/gatsby/src/commands/serve.ts b/packages/gatsby/src/commands/serve.ts index 154e712a25916..2f65a4ca804ee 100644 --- a/packages/gatsby/src/commands/serve.ts +++ b/packages/gatsby/src/commands/serve.ts @@ -127,13 +127,9 @@ module.exports = async (program: IServeProgram): Promise => { app.use( `/__partytown-proxy`, proxy(req => new URL(req.query.url as string).host as string, { - filter: req => - partytownProxiedURLs.some(host => { - const queryParamHost = new URL(req.query.url as string).host as string - return queryParamHost === host - }), + filter: req => partytownProxiedURLs.some(url => req.query?.url === url), proxyReqPathResolver: req => { - const { pathname = ``, search = `` } = new URL(req.query.url as string) + const { pathname = ``, search = `` } = new URL(req.query?.url as string) return pathname + search }, }) From 5db414ad921d907fb2a1d2f8f3ba0e64647ec867 Mon Sep 17 00:00:00 2001 From: Michal Piechowiak Date: Thu, 12 May 2022 11:25:10 +0200 Subject: [PATCH 43/63] make sure partytown's wrapRootElement runs as last one, to be able to collect scripts set in wrapRootElement --- .../bootstrap/load-plugins/load-internal-plugins.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/gatsby/src/bootstrap/load-plugins/load-internal-plugins.ts b/packages/gatsby/src/bootstrap/load-plugins/load-internal-plugins.ts index d0d5d5dc5eaa2..55e1a07234f98 100644 --- a/packages/gatsby/src/bootstrap/load-plugins/load-internal-plugins.ts +++ b/packages/gatsby/src/bootstrap/load-plugins/load-internal-plugins.ts @@ -39,7 +39,6 @@ export function loadInternalPlugins( `../../internal-plugins/webpack-theme-component-shadowing`, `../../internal-plugins/bundle-optimisations`, `../../internal-plugins/functions`, - `../../internal-plugins/partytown`, ].filter(Boolean) as Array internalPlugins.forEach(relPath => { @@ -162,5 +161,15 @@ export function loadInternalPlugins( plugins.push(processedPageCreatorPlugin) + // Partytown plugin collects usage of + + + ) +} + +export default InlineScriptsPage diff --git a/e2e-tests/gatsby-script/src/pages/index.tsx b/e2e-tests/development-runtime/src/pages/gatsby-script-navigation.js similarity index 78% rename from e2e-tests/gatsby-script/src/pages/index.tsx rename to e2e-tests/development-runtime/src/pages/gatsby-script-navigation.js index e4fa3bd3878f7..05b2944b880c4 100644 --- a/e2e-tests/gatsby-script/src/pages/index.tsx +++ b/e2e-tests/development-runtime/src/pages/gatsby-script-navigation.js @@ -1,15 +1,17 @@ import * as React from "react" import { Link } from "gatsby" -import "../styles/global.css" const pages = [ - { name: `Scripts with sources`, path: `/scripts-with-sources` }, - { name: `Inline scripts`, path: `/inline-scripts` }, + { + name: `Scripts with sources`, + path: `/gatsby-script-scripts-with-sources/`, + }, + { name: `Inline scripts`, path: `/gatsby-script-inline-scripts/` }, ] function IndexPage() { return ( -
+

Script component e2e test

Tests are on other pages, links below.

diff --git a/e2e-tests/development-runtime/src/pages/gatsby-script-scripts-with-sources.js b/e2e-tests/development-runtime/src/pages/gatsby-script-scripts-with-sources.js new file mode 100644 index 0000000000000..1d2c69b93e6d7 --- /dev/null +++ b/e2e-tests/development-runtime/src/pages/gatsby-script-scripts-with-sources.js @@ -0,0 +1,63 @@ +import * as React from "react" +import { Link, Script } from "gatsby" +import { ScriptResourceRecords } from "../components/gatsby-script-resource-records" +import { useOccupyMainThread } from "../hooks/use-occupy-main-thread" +import { scripts, scriptUrls } from "../../gatsby-script-scripts" +import { onLoad, onError } from "../utils/gatsby-script-callbacks" + +function ScriptsWithSourcesPage() { + useOccupyMainThread() + + return ( +
+

Script component e2e test

+ +
+

Scripts with sources

+ + scriptUrls.has(record.name) || record.name.includes(`framework`) + } + count={3} + /> + +
+ + + - -
- ) -} - -export default InlineScriptsPage diff --git a/e2e-tests/gatsby-script/src/pages/scripts-with-sources.tsx b/e2e-tests/gatsby-script/src/pages/scripts-with-sources.tsx deleted file mode 100644 index 5b4212ee7dffc..0000000000000 --- a/e2e-tests/gatsby-script/src/pages/scripts-with-sources.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import * as React from "react" -import { Link, Script, ScriptStrategy } from "gatsby" -import { ScriptResourceRecords } from "../components/script-resource-records" -import { useOccupyMainThread } from "../hooks/use-occupy-main-thread" -import { scripts, scriptUrls } from "../../scripts" -import { onLoad, onError } from "../utils/callbacks" -import "../styles/global.css" - -function ScriptsWithSourcesPage() { - useOccupyMainThread() - - return ( -
-

Script component e2e test

- -
-

Scripts with sources

- - scriptUrls.has(record.name) || record.name.includes(`framework`) - } - count={3} - /> - -
- - - + +
+ ) +} + +export default InlineScriptsPage diff --git a/e2e-tests/production-runtime/src/pages/gatsby-script-navigation.js b/e2e-tests/production-runtime/src/pages/gatsby-script-navigation.js new file mode 100644 index 0000000000000..05b2944b880c4 --- /dev/null +++ b/e2e-tests/production-runtime/src/pages/gatsby-script-navigation.js @@ -0,0 +1,43 @@ +import * as React from "react" +import { Link } from "gatsby" + +const pages = [ + { + name: `Scripts with sources`, + path: `/gatsby-script-scripts-with-sources/`, + }, + { name: `Inline scripts`, path: `/gatsby-script-inline-scripts/` }, +] + +function IndexPage() { + return ( +
+

Script component e2e test

+

Tests are on other pages, links below.

+ +

Links to pages (anchor):

+ + +

Links to pages (gatsby-link):

+
    + {pages.map(({ name, path }) => ( +
  • + + {`${name} (gatsby-link)`} + +
    • + ))} +
+
+ ) +} + +export default IndexPage diff --git a/e2e-tests/production-runtime/src/pages/gatsby-script-scripts-with-sources.js b/e2e-tests/production-runtime/src/pages/gatsby-script-scripts-with-sources.js new file mode 100644 index 0000000000000..1d2c69b93e6d7 --- /dev/null +++ b/e2e-tests/production-runtime/src/pages/gatsby-script-scripts-with-sources.js @@ -0,0 +1,63 @@ +import * as React from "react" +import { Link, Script } from "gatsby" +import { ScriptResourceRecords } from "../components/gatsby-script-resource-records" +import { useOccupyMainThread } from "../hooks/use-occupy-main-thread" +import { scripts, scriptUrls } from "../../gatsby-script-scripts" +import { onLoad, onError } from "../utils/gatsby-script-callbacks" + +function ScriptsWithSourcesPage() { + useOccupyMainThread() + + return ( +
+

Script component e2e test

+ +
+

Scripts with sources

+ + scriptUrls.has(record.name) || record.name.includes(`framework`) + } + count={3} + /> + +
+ + + + + + +