-
Notifications
You must be signed in to change notification settings - Fork 10.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(gatsby,gatsby-script): Do not use context for script collection (#…
…36246) * feat(gatsby): Do not use context for SSR script collection * Update snapshots * Fix location context * Refactor global struct * Make browser runtime work * Only inject if scripts collected * Refactor into separate modules * Snapshots again * Remove unit tests already covered in e2e * Fix browser runtime location provider * Add off-main-thread CSR navigation develop runtime tests * Make comments more terse * Duplicate tests to prod runtime * Reorder assertions * See if timeout fixes assertion failing only in CI * Bump expect timeout in config instead * Implement waitForRouteChange fixture to fix flakes * Try strange wait pattern * Sigh misconfig * Skip CSR nav test, it's not worth it * Update packages/gatsby/src/internal-plugins/partytown/gatsby-browser.tsx Co-authored-by: Ward Peeters <ward@coding-tech.com> * Cleanup * PR comments * Fix multiple service worker leak * Remove off-main-thread CSR hack * Update limitations in docs * Update snapshot * Guard for develop env Co-authored-by: Ward Peeters <ward@coding-tech.com>
- Loading branch information
Showing
25 changed files
with
384 additions
and
298 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
66 changes: 52 additions & 14 deletions
66
e2e-tests/development-runtime/playwright/gatsby-script-off-main-thread.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,65 @@ | ||
| import { test, expect } from "@playwright/test" | ||
|
|
||
| const id = { | ||
| templateLiteral: `inline-script-template-literal-mutation`, | ||
| dangerouslySet: `inline-script-dangerously-set-mutation`, | ||
| // Acutual <Script> | ||
| three: `three`, | ||
|
|
||
| // DOM nodes appended as a result of `<Script>` execution | ||
| templateLiteral: `mutation-inline-script-template-literal`, | ||
| dangerouslySet: `mutation-inline-script-dangerously-set`, | ||
| scriptWithSrc: `mutation-script-with-src`, | ||
| } | ||
|
|
||
| test.describe(`off-main-thread scripts`, () => { | ||
| test(`should load successfully`, async ({ page }) => { | ||
| test(`should load successfully when the page is visited directly`, async ({ | ||
| page, | ||
| }) => { | ||
| await page.goto(`/gatsby-script-off-main-thread/`) | ||
|
|
||
| // @ts-ignore | ||
| const scriptWithSrc = await page.evaluate(() => typeof THREE === `function`) | ||
| const partytownSnippet = page.locator(`[data-partytown]`) | ||
| const scriptWithSrc = page.locator(`[id=${id.three}]`) | ||
| const templateLiteral = page.locator(`[id=${id.templateLiteral}]`) | ||
| const dangerouslySet = page.locator(`[id=${id.dangerouslySet}]`) | ||
|
|
||
| await expect(partytownSnippet).toContainText(/THREE/) // Forwards configured | ||
| await expect(templateLiteral).toHaveText(`${id.templateLiteral}: success`) // Template literal inline scripts loaded | ||
| await expect(dangerouslySet).toHaveText(`${id.dangerouslySet}: success`) // Dangerously set inline scripts loaded | ||
| await expect(scriptWithSrc).toHaveAttribute(`type`, `text/partytown-x`) // Scripts with sources loaded | ||
| }) | ||
|
|
||
| // This behavior is broken upstream in Partytown, see https://github.com/BuilderIO/partytown/issues/74 | ||
| test.skip(`should load successfully when navigating via Gatsby Link to a page with off-main-thread scripts`, async ({ | ||
| page, | ||
| }) => { | ||
| await page.goto(`/`) | ||
| await page.locator(`[data-testid=off-main-thread]`).click() | ||
|
|
||
| const templateLiteral = await page | ||
| .locator(`[id=${id.templateLiteral}]`) | ||
| .textContent() | ||
| const partytownSnippet = page.locator(`[data-partytown]`) | ||
| const scriptWithSrc = page.locator(`[id=${id.three}]`) | ||
| const templateLiteral = page.locator(`[id=${id.templateLiteral}]`) | ||
| const dangerouslySet = page.locator(`[id=${id.dangerouslySet}]`) | ||
|
|
||
| await expect(partytownSnippet).toContainText(/THREE/) // Forwards configured | ||
| await expect(templateLiteral).toHaveText(`${id.templateLiteral}: success`) // Template literal inline scripts loaded | ||
| await expect(dangerouslySet).toHaveText(`${id.dangerouslySet}: success`) // Dangerously set inline scripts loaded | ||
| await expect(scriptWithSrc).toHaveAttribute(`type`, `text/partytown-x`) // Scripts with sources loaded, use `type` attr Partytown mutates on success as proxy | ||
| }) | ||
|
|
||
| // This behavior is broken upstream in Partytown, see https://github.com/BuilderIO/partytown/issues/74 | ||
| test.skip(`should load successfully when navigating via Gatsby Link between pages with off-main-thread scripts`, async ({ | ||
| page, | ||
| }) => { | ||
| await page.goto(`/gatsby-script-off-main-thread/`) | ||
| await page.locator(`[data-testid=off-main-thread-2]`).click() | ||
|
|
||
| const dangerouslySet = await page | ||
| .locator(`[id=${id.dangerouslySet}]`) | ||
| .textContent() | ||
| const partytownSnippet = page.locator(`[data-partytown]`) | ||
| const templateLiteral = page.locator(`[id=${id.templateLiteral}-2]`) | ||
| const dangerouslySet = page.locator(`[id=${id.dangerouslySet}-2]`) | ||
| const scriptWithSrc = page.locator(`[id=${id.scriptWithSrc}]`) | ||
|
|
||
| await expect(scriptWithSrc).toBeTruthy() | ||
| await expect(templateLiteral).toEqual(`${id.templateLiteral}: success`) | ||
| await expect(dangerouslySet).toEqual(`${id.dangerouslySet}: success`) | ||
| await expect(partytownSnippet).toContainText(/some-other-forward/) // Forwards configured | ||
| await expect(templateLiteral).toHaveText(`${id.templateLiteral}-2: success`) // Template literal inline scripts loaded | ||
| await expect(dangerouslySet).toHaveText(`${id.dangerouslySet}-2: success`) // Dangerously set inline scripts loaded | ||
| await expect(scriptWithSrc).toHaveText(`${id.scriptWithSrc}: success`) // Scripts with sources loaded | ||
| }) | ||
| }) |
42 changes: 42 additions & 0 deletions
42
e2e-tests/development-runtime/src/pages/gatsby-script-off-main-thread-2.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import * as React from "react" | ||
| import { Script } from "gatsby" | ||
|
|
||
| function OffMainThreadScriptsTwo() { | ||
| return ( | ||
| <main style={{ margin: `1em` }}> | ||
| <h1>Script component e2e test</h1> | ||
|
|
||
| <Script | ||
| src="http://localhost:8000/used-by-off-main-thread-2.js" | ||
| strategy="off-main-thread" | ||
| forward={[`some-other-forward`]} | ||
| /> | ||
|
|
||
| <Script id="inline-script-template-literal" strategy="off-main-thread"> | ||
| {createScript(`inline-script-template-literal-2`)} | ||
| </Script> | ||
|
|
||
| <Script | ||
| id="inline-script-dangerously-set" | ||
| strategy="off-main-thread" | ||
| dangerouslySetInnerHTML={{ | ||
| __html: createScript(`inline-script-dangerously-set-2`), | ||
| }} | ||
| /> | ||
| </main> | ||
| ) | ||
| } | ||
|
|
||
| function createScript(id) { | ||
| return ` | ||
| { | ||
| const main = document.querySelector('main'); | ||
| const elem = document.createElement('div'); | ||
| elem.textContent = 'mutation-${id}: success'; | ||
| elem.id = 'mutation-${id}'; | ||
| main.appendChild(elem); | ||
| } | ||
| ` | ||
| } | ||
|
|
||
| export default OffMainThreadScriptsTwo |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 8 additions & 0 deletions
8
e2e-tests/development-runtime/static/used-by-off-main-thread-2.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| { | ||
| const id = `script-with-src` | ||
| const main = document.querySelector(`main`) | ||
| const elem = document.createElement(`div`) | ||
| elem.textContent = `mutation-${id}: success` | ||
| elem.id = `mutation-${id}` | ||
| main.appendChild(elem) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
66 changes: 52 additions & 14 deletions
66
e2e-tests/production-runtime/playwright/gatsby-script-off-main-thread.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,65 @@ | ||
| import { test, expect } from "@playwright/test" | ||
|
|
||
| const id = { | ||
| templateLiteral: `inline-script-template-literal-mutation`, | ||
| dangerouslySet: `inline-script-dangerously-set-mutation`, | ||
| // Acutual <Script> | ||
| three: `three`, | ||
|
|
||
| // DOM nodes appended as a result of `<Script>` execution | ||
| templateLiteral: `mutation-inline-script-template-literal`, | ||
| dangerouslySet: `mutation-inline-script-dangerously-set`, | ||
| scriptWithSrc: `mutation-script-with-src`, | ||
| } | ||
|
|
||
| test.describe(`off-main-thread scripts`, () => { | ||
| test(`should load successfully`, async ({ page }) => { | ||
| test(`should load successfully when the page is visited directly`, async ({ | ||
| page, | ||
| }) => { | ||
| await page.goto(`/gatsby-script-off-main-thread/`) | ||
|
|
||
| // @ts-ignore | ||
| const scriptWithSrc = await page.evaluate(() => typeof THREE === `function`) | ||
| const partytownSnippet = page.locator(`[data-partytown]`) | ||
| const scriptWithSrc = page.locator(`[id=${id.three}]`) | ||
| const templateLiteral = page.locator(`[id=${id.templateLiteral}]`) | ||
| const dangerouslySet = page.locator(`[id=${id.dangerouslySet}]`) | ||
|
|
||
| await expect(partytownSnippet).toContainText(/THREE/) // Forwards configured | ||
| await expect(templateLiteral).toHaveText(`${id.templateLiteral}: success`) // Template literal inline scripts loaded | ||
| await expect(dangerouslySet).toHaveText(`${id.dangerouslySet}: success`) // Dangerously set inline scripts loaded | ||
| await expect(scriptWithSrc).toHaveAttribute(`type`, `text/partytown-x`) // Scripts with sources loaded | ||
| }) | ||
|
|
||
| // This behavior is broken upstream in Partytown, see https://github.com/BuilderIO/partytown/issues/74 | ||
| test.skip(`should load successfully when navigating via Gatsby Link to a page with off-main-thread scripts`, async ({ | ||
| page, | ||
| }) => { | ||
| await page.goto(`/`) | ||
| await page.locator(`[data-testid=off-main-thread]`).click() | ||
|
|
||
| const templateLiteral = await page | ||
| .locator(`[id=${id.templateLiteral}]`) | ||
| .textContent() | ||
| const partytownSnippet = page.locator(`[data-partytown]`) | ||
| const scriptWithSrc = page.locator(`[id=${id.three}]`) | ||
| const templateLiteral = page.locator(`[id=${id.templateLiteral}]`) | ||
| const dangerouslySet = page.locator(`[id=${id.dangerouslySet}]`) | ||
|
|
||
| await expect(partytownSnippet).toContainText(/THREE/) // Forwards configured | ||
| await expect(templateLiteral).toHaveText(`${id.templateLiteral}: success`) // Template literal inline scripts loaded | ||
| await expect(dangerouslySet).toHaveText(`${id.dangerouslySet}: success`) // Dangerously set inline scripts loaded | ||
| await expect(scriptWithSrc).toHaveAttribute(`type`, `text/partytown-x`) // Scripts with sources loaded, use `type` attr Partytown mutates on success as proxy | ||
| }) | ||
|
|
||
| // This behavior is broken upstream in Partytown, see https://github.com/BuilderIO/partytown/issues/74 | ||
| test.skip(`should load successfully when navigating via Gatsby Link between pages with off-main-thread scripts`, async ({ | ||
| page, | ||
| }) => { | ||
| await page.goto(`/gatsby-script-off-main-thread/`) | ||
| await page.locator(`[data-testid=off-main-thread-2]`).click() | ||
|
|
||
| const dangerouslySet = await page | ||
| .locator(`[id=${id.dangerouslySet}]`) | ||
| .textContent() | ||
| const partytownSnippet = page.locator(`[data-partytown]`) | ||
| const templateLiteral = page.locator(`[id=${id.templateLiteral}-2]`) | ||
| const dangerouslySet = page.locator(`[id=${id.dangerouslySet}-2]`) | ||
| const scriptWithSrc = page.locator(`[id=${id.scriptWithSrc}]`) | ||
|
|
||
| await expect(scriptWithSrc).toBeTruthy() | ||
| await expect(templateLiteral).toEqual(`${id.templateLiteral}: success`) | ||
| await expect(dangerouslySet).toEqual(`${id.dangerouslySet}: success`) | ||
| await expect(partytownSnippet).toContainText(/some-other-forward/) // Forwards configured | ||
| await expect(templateLiteral).toHaveText(`${id.templateLiteral}-2: success`) // Template literal inline scripts loaded | ||
| await expect(dangerouslySet).toHaveText(`${id.dangerouslySet}-2: success`) // Dangerously set inline scripts loaded | ||
| await expect(scriptWithSrc).toHaveText(`${id.scriptWithSrc}: success`) // Scripts with sources loaded | ||
| }) | ||
| }) |
42 changes: 42 additions & 0 deletions
42
e2e-tests/production-runtime/src/pages/gatsby-script-off-main-thread-2.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import * as React from "react" | ||
| import { Script } from "gatsby" | ||
|
|
||
| function OffMainThreadScriptsTwo() { | ||
| return ( | ||
| <main style={{ margin: `1em` }}> | ||
| <h1>Script component e2e test</h1> | ||
|
|
||
| <Script | ||
| src="http://localhost:9000/used-by-off-main-thread-2.js" | ||
| strategy="off-main-thread" | ||
| forward={[`some-other-forward`]} | ||
| /> | ||
|
|
||
| <Script id="inline-script-template-literal" strategy="off-main-thread"> | ||
| {createScript(`inline-script-template-literal-2`)} | ||
| </Script> | ||
|
|
||
| <Script | ||
| id="inline-script-dangerously-set" | ||
| strategy="off-main-thread" | ||
| dangerouslySetInnerHTML={{ | ||
| __html: createScript(`inline-script-dangerously-set-2`), | ||
| }} | ||
| /> | ||
| </main> | ||
| ) | ||
| } | ||
|
|
||
| function createScript(id) { | ||
| return ` | ||
| { | ||
| const main = document.querySelector('main'); | ||
| const elem = document.createElement('div'); | ||
| elem.id = 'mutation-${id}'; | ||
| elem.textContent = 'mutation-${id}: success'; | ||
| main.appendChild(elem); | ||
| } | ||
| ` | ||
| } | ||
|
|
||
| export default OffMainThreadScriptsTwo |
Oops, something went wrong.