feat(gatsby-script): Script component #35403

tyhopp · 2022-04-12T02:15:14Z

Description

Link to RFC

Merged into this branch

Documentation

#35647

examples/using-gatsby-script/README.md

packages/gatsby-script/src/gatsby-script.tsx

wardpeet · 2022-04-19T05:55:56Z

Quick question, why a different e2e test and not using production-runtime for this?

tyhopp · 2022-04-19T06:28:53Z

Quick question, why a different e2e test and not using production-runtime for this?

Separation of concerns, @pieh mentioned this as well and we thought if the extra setup cost of a separate suite becomes a problem we can move these into production runtime

wardpeet

Added some remarks but overall looks good

packages/gatsby-script/src/gatsby-script.tsx

* test(gatsby-script): e2e test scaffolding * test(gatsby-script): Test pre-hydrate strategy * test(gatsby-script): Refactor resource record command * test(gatsby-script): Test post-hydrate strategy * test(gatsby-script): Test idle strategy * test(gatsby-script): Update readme, npm scripts * test(gatsby-script): Remove unnecessary dev Cypress config * test(gatsby-script): DRY middleware intercepts * chore(gatsby-script): e2e circle ci config * chore(gatsby-script): Add e2e to circle ci jobs * chore(gatsby-script): Use published package so e2e tests can resolve it * test(gatsby-script): Add missing network waits to e2e tests

* feat(gatsby-script): Implement inline scripts * test(gatsby-script): Inline scripts unit tests * test(gatsby-script): Set up for e2e tests * test(gatsby-script): Display scripts with sources strategy * test(gatsby-script): dangerouslySetInnerHTML e2e tests * test(gatsby-script): Template literals e2e tests * chore(gatsby-script): Update package readme * chore(gatsby-script): Install latest canary to run in CI * chore(gatsby-script): Try waitForRouteChange to fix inconsistent Cypress network waits * chore(gatsby-script): Try delaying responses so Cypress has time to set up network waits * chore(gatsby-script): Try increasing network response delay even further * chore(gatsby-script): Remove unreliable Cypress network waits entirely

* feat(gatsby-script): Normal attribute implementation * chore(gatsby-script): Bump default command timeout

* feat(gatsy-script): Initial on load callback implementation * test(gatsby-script): Refactor e2e test structure * refactor(gatsby-script): Fix eslint, ts errors * feat(gatsby-script): Handle edge cases from Gatsby link navigation * test(gatsby-script): Adjust e2e tests so they run successfully again * feat(gatsby-script): On load callback e2e tests * test(gatsby-script): Scripts with sources navigation e2e tests * test(gatsby-script): Inline scripts navigation e2e tests * test(gatsby-script): Adjust e2e tests, add comment on edge case * test(gatsby-script): Fix unit tests

…pport callbacks

* feat(gatsby-script): On error callback * test(gatsby-script): Update on error callback e2e test logic * chore(gatsby-script): Skip inline scripts gatsby link nav test

* feat(gatsby): initial support for off-main-thread in develop Co-authored-by: tyhopp <hopp.ty.c@gmail.com> * feat(gatsby): Refactor partytown local proxy logic * Use origin instead of host in serve/develop proxy Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>

…me suites (#35663) * test(gatsby-script): Production runtime * Develop runtime

* test(gatsby-script): SSR and browser APIs Co-authored-by: Jude Agboola <marvinjudehk@gmail.com> * Development runtime Co-authored-by: Jude Agboola <marvinjudehk@gmail.com>

* test(gatsby-script): e2e off-main-thread develop runtime * Test in CI * Production runtime * Update load plugins snapshots again * Post install Chromium for Playwright * Fix tests

* add shim and test * add develop and prod run time e2e tests * review updates * Fix imports * Fix prod runtime imports * Namespace tests Co-authored-by: tyhopp <hopp.ty.c@gmail.com>

packages/gatsby-script/src/gatsby-script.tsx

…cripts (#35692) * feat(gatsby-script): Apply crossorigin anonymous on off-main-thread scripts * Fix offline test flake

pieh

Let's ship it.

There is follow up to do (handling onLoad and onError callbacks on duplicate scripts as well as some additional warnings for DX - this will be handled in #35610 that aim to be merged before next stable release)

wardpeet · 2022-05-18T10:33:23Z

packages/gatsby/src/internal-plugins/partytown/proxy.ts

+import proxy from "express-http-proxy"
+import type { RequestHandler } from "express"
+
+export const partytownProxyPath = `/__partytown-proxy`


Let's call it something in this vein

Suggested change

export const partytownProxyPath = `/__partytown-proxy`

export const partytownProxyPath = `/__thirdparty-proxy`

wardpeet · 2022-05-18T10:35:54Z

packages/gatsby/src/internal-plugins/partytown/gatsby-browser.tsx

+                }
+              }
+            } else {
+              console.log(`unexpected shape of forward`, newScript)


Only log in develop

Suggested change

console.log(`unexpected shape of forward`, newScript)

if (process.env.NODE_ENV === 'development') {

console.log(`unexpected shape of forward`, newScript)

}

wardpeet · 2022-05-18T10:46:48Z

e2e-tests/development-runtime/cypress/integration/gatsby-script/gatsby-script-inline-scripts.js

+        cy.get(`table[id=script-mark-records] tbody`)
+          .children()
+          .should(`have.length`, 4)


This counts the rows of the table, and this is how you know how many scripts got loaded?

This is part assertion and I think part flake potential removal as this will (potentially?) wait for expected amount of scripts to report their status before doing assertion on those individual ones

wardpeet · 2022-05-19T11:04:40Z

packages/gatsby-script/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": [["babel-preset-gatsby-package", { "browser": true }], "@babel/preset-typescript"]


I think you need esm to be true too, to make sure it's going to output smaller bundle size

Suggested change

"presets": [["babel-preset-gatsby-package", { "browser": true }], "@babel/preset-typescript"]

"presets": [["babel-preset-gatsby-package", { "browser": true, "esm": true }], "@babel/preset-typescript"]

wardpeet · 2022-05-19T11:06:27Z

packages/gatsby-script/src/gatsby-script.tsx

+        })
+        break
+      case ScriptStrategy.offMainThread:
+        if (typeof window !== `undefined` && collectScript) {


useEffects only run on the client so window is always defined.

Suggested change

if (typeof window !== `undefined` && collectScript) {

if (collectScript) {

wardpeet · 2022-05-19T11:07:50Z

packages/gatsby-script/src/gatsby-script.tsx

+      return (
+        <script
+          type="text/partytown"
+          async


Suggested change

async

wardpeet · 2022-05-19T11:07:57Z

packages/gatsby-script/src/gatsby-script.tsx

+    return (
+      <script
+        type="text/partytown"
+        async


Suggested change

async

pieh · 2022-05-19T13:01:17Z

We will address Ward's comments in follow up as they are not blocking. Merging

refactor(gatsby,gatsby-script): Misc comments from Ward in #35403 Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>

gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Apr 12, 2022

tyhopp marked this pull request as draft April 12, 2022 02:15

tyhopp removed the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Apr 12, 2022

LekoArts added this to the Script Component milestone Apr 12, 2022

pieh reviewed Apr 14, 2022

View reviewed changes

examples/using-gatsby-script/README.md Outdated Show resolved Hide resolved

pieh reviewed Apr 14, 2022

View reviewed changes

packages/gatsby-script/src/gatsby-script.tsx Outdated Show resolved Hide resolved

pieh reviewed Apr 14, 2022

View reviewed changes

packages/gatsby-script/src/gatsby-script.tsx Outdated Show resolved Hide resolved

tyhopp changed the title ~~feat(gatsby-script): Script component implementation~~ feat(gatsby-script): Script component Apr 19, 2022

wardpeet reviewed Apr 21, 2022

View reviewed changes

tyhopp and others added 16 commits May 9, 2022 10:47

feat(gatsby-script): Package scaffolding

3442bb4

test(gatsby-script): Unit tests

0c2cb3b

chore(gatsby-script): Adjust build scripts, typegen

a305190

chore(gatsby-script): Introduce example site

a3c15e6

chore(gatsby-script): Update yarn lock so CI runs

99a4e70

chore(gatsby-script): Remove unnecessary config files

4863c1c

chore(gatsby-script): Remove example site

937fdae

feat(gatsby-script): Normal attributes (#35445)

fef9d3b

* feat(gatsby-script): Normal attribute implementation * chore(gatsby-script): Bump default command timeout

refactor(gatsby-script): Pre-hydrate scripts with sources will not su…

14fea1f

…pport callbacks

feat(gatsby-script): On error callback (#35466)

a8f8ded

* feat(gatsby-script): On error callback * test(gatsby-script): Update on error callback e2e test logic * chore(gatsby-script): Skip inline scripts gatsby link nav test

refactor(gatsby-script): Remove pre-hydrate strategy

62953a0

refactor(gatsby-script): Return null instead of fragment

48cf273

chore(gatsby-script): Fix typegen

dc1ded4

tyhopp and others added 14 commits May 16, 2022 09:43

test(gatsby-script): Migrate e2e test to production and develop runti…

6919d9e

…me suites (#35663) * test(gatsby-script): Production runtime * Develop runtime

test(gatsby-script): SSR and browser APIs (#35664)

6420b54

* test(gatsby-script): SSR and browser APIs Co-authored-by: Jude Agboola <marvinjudehk@gmail.com> * Development runtime Co-authored-by: Jude Agboola <marvinjudehk@gmail.com>

update snapshots

302eb4e

test(gatsby-script): Off main thread e2e (#35665)

caff1f4

* test(gatsby-script): e2e off-main-thread develop runtime * Test in CI * Production runtime * Update load plugins snapshots again * Post install Chromium for Playwright * Fix tests

Make partytown a dev dep in gatsby-script

182b6c3

Remove gatsby-script e2e test suite that is now in dev/prod runtime

3cf979f

Resolve conflicts

bcfef18

Merge branch 'master' into feat-script-component

bfb2178

feat(gatby-script): Shim requestIdleCallback (#35611)

cfd280f

* add shim and test * add develop and prod run time e2e tests * review updates * Fix imports * Fix prod runtime imports * Namespace tests Co-authored-by: tyhopp <hopp.ty.c@gmail.com>

Remove job

a8711ab

Remove incorrect type

b18cb0c

Request idle callback shim test timeout

d099953

Add only Partytown key we handle to type

4d7d8a1

pieh reviewed May 17, 2022

View reviewed changes

packages/gatsby-script/src/gatsby-script.tsx Outdated Show resolved Hide resolved

tyhopp added 4 commits May 17, 2022 16:38

Add warning for no collect script func available

8e55e3a

Use shortened URL

3d246dd

Update gatsby-script readme

38e3707

Fix offline tests

2ff6d42

tyhopp marked this pull request as ready for review May 18, 2022 03:23

tyhopp requested a review from pieh May 18, 2022 04:01

feat(gatsby-script): Apply crossorigin anonymous to off-main-thread s…

a57cb15

…cripts (#35692) * feat(gatsby-script): Apply crossorigin anonymous on off-main-thread scripts * Fix offline test flake

pieh approved these changes May 19, 2022

View reviewed changes

wardpeet reviewed May 19, 2022

View reviewed changes

pieh merged commit a88703f into master May 19, 2022

pieh deleted the feat-script-component branch May 19, 2022 13:01

tyhopp added a commit that referenced this pull request May 20, 2022

refactor(gatsby,gatsby-script): Misc comments from Ward in #35403

2895ad5

tyhopp mentioned this pull request May 20, 2022

refactor(gatsby,gatsby-script): Misc review comments #35710

Merged

pieh added a commit that referenced this pull request May 20, 2022

refactor(gatsby,gatsby-script): Misc review comments (#35710)

f7f8ffe

refactor(gatsby,gatsby-script): Misc comments from Ward in #35403 Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(gatsby-script): Script component #35403

feat(gatsby-script): Script component #35403

tyhopp commented Apr 12, 2022 •

edited

Loading

wardpeet commented Apr 19, 2022

tyhopp commented Apr 19, 2022

wardpeet left a comment

pieh left a comment

wardpeet May 18, 2022

wardpeet May 18, 2022

wardpeet May 18, 2022

pieh May 20, 2022

wardpeet May 19, 2022

wardpeet May 19, 2022

wardpeet May 19, 2022

wardpeet May 19, 2022

pieh commented May 19, 2022

	export const partytownProxyPath = `/__partytown-proxy`
	export const partytownProxyPath = `/__thirdparty-proxy`

		@@ -0,0 +1,3 @@
		{
		"presets": [["babel-preset-gatsby-package", { "browser": true }], "@babel/preset-typescript"]

	if (typeof window !== `undefined` && collectScript) {
	if (collectScript) {

feat(gatsby-script): Script component #35403

feat(gatsby-script): Script component #35403

Conversation

tyhopp commented Apr 12, 2022 • edited Loading

Description

Merged into this branch

Documentation

wardpeet commented Apr 19, 2022

tyhopp commented Apr 19, 2022

wardpeet left a comment

Choose a reason for hiding this comment

pieh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pieh commented May 19, 2022

tyhopp commented Apr 12, 2022 •

edited

Loading