My first pass notes from the Gatsby Talk - How to Use Gatsby's Script Component, Powered by Partytown

Using Gatsby Scripts in conjunction with partytown enables a configuration where third party scripts could be abstracted into a webworker.

Rather than recreating a DOM (ala JS-DOM, [1mb] NODEJS), partytown sends the msg back to DOM to see if the dom understands the data. This is problematic as the post/message communication ebwteen worker and main thread is potentially 'blocking'. IT almost certainly will block the main thread if worker asks for data from the DOM, as it's asking the DOM.

Third party scripts are designed to be syncronous! This means there needs to be careful consideration. Service Worker creates a 'pool' between the main + worker thread. this is done via 'proxytime'.

Partytime/ Partytown

partytown/proxytime attempts to bunch large amounts of DOM requests together to minimise post.message. These are via sync.xhr which is deprecated outside of web workers. Via service worker, these appear in console. Look to atomics for more intriguing solution...

requestOutOfCallback.

Reading innerWidth, or ClientOffset. Next call will be hieght or client height. Any dimension call gets everything as layout shift.

getter goes through blocking flow

setter does NOT NEED to be blocking. Maybe it does.

But A-OK in web workers.

gatsbyjs has an opinionated (easy-to-use) config/implementation for partytown. Via the Scripts component. The helps config the partytown proivder, web-worker, service worker is on right domain ect. Including enableing an "allow" list/proxy. These URLS need a proxy, create a redirect. gsby cloud config can handle a proxy if needed. (EG these urls) Improving soon... go and see.

debugging partytown

Logging dev tools. Proxies crash if some configuration in 3rd party libraries in partytown. Something in gatsby-config would help!! great idea wardpeet

partytown-sw

gatsvy config

how gatsby-config/partytown manage 3rd party cdn

google-tm __thirdpartyproxy

Q&A

In Production? - small scale and maintained.

GTM stack container, marketeers can embed in PT.

-- ### a-syncronicity What about impending to DOC? - partytown will control real DOM ops.

Ultimate there are 3 stages, Web-Worker (syncronus-XHR), Service-Worker (async -> post-message) and Main Thread(DOM).

Integration with current Service Workers, Whats the deal with scope? Host takes precedence, as long as it's not called sw/partytown.

Interesting aside - document.implementation.createDocument

Creates an instance/copy in memory. Could this be injected into a webworker???

@adamDbradley builderIO