Partytown

Use the Partytown to run third-party scripts from a web worker

Options

options object

Custom Partytown configuration

See https://partytown.qwik.dev/configuration/

debug boolean

When set to true, Partytown scripts are not inlined and not minified.

https://partytown.qwik.dev/debugging

forward object[]

Many third-party scripts provide a global variable which user code calls in order to send data to the service. For example, Google Tag Manager uses a Data Layer array, and by pushing data to the array, the data is then sent on to GTM. Because we're moving third-party scripts to a web worker, the main thread needs to know which variables to patch first, and when Partytown loads, it can then forward the event data on to the service.

Below is an example of Google Tag Manager and Facebook Pixel:

['dataLayer.push', 'fbq']

https://partytown.qwik.dev/forwarding-events

fallbackTimeout number

Timeout in ms before the initialization considered failed and the fallback solution is executed Default: 9999

sandboxParent string

The css selector where the sandbox should be placed. Default: body

mainWindowAccessors string[]

globalFns string[]

Rarely, a script will add a named function to the global scope with the intent that other scripts can call the named function (like Adobe Launch). Due to how Partytown scopes each script, these named functions do not get added to window. The globalFns config can be used to manually ensure each function is added to the global scope. Consider this an escape hatch when a third-party script rudely pollutes window with functions.

loadScriptsOnMainThread union[]

This array can be used to filter which script are executed via Partytown and which you would like to execute on the main thread.

get object

set object

apply object

allowXhrCredentials boolean

When set to true, the Partytown Web Worker will respect the withCredentials option of XMLHttpRequests. Default: false

lib string

An absolute path to the root directory which Partytown library files can be found. The library path must start and end with a /. By default the files will load from the server's /~partytown/ directory. Note that the library path must be on the same origin as the html document, and is also used as the scope of the Partytown service worker.

Default:

"/~partytown/"

logCalls boolean

Log method calls (debug mode required)

logGetters boolean

Log getter calls (debug mode required)

logSetters boolean

Log setter calls (debug mode required)

logImageRequests boolean

Log Image() src requests (debug mode required)

logMainAccess boolean

Log calls to main access, which also shows how many tasks were sent per message (debug mode required)

logScriptExecution boolean

Log script executions (debug mode required)

logSendBeaconRequests boolean

Log navigator.sendBeacon() requests (debug mode required)

logStackTraces boolean

Log stack traces (debug mode required)

swPath string

Path to the service worker file. Defaults to partytown-sw.js.

nonce string

The nonce property may be set on script elements created by Partytown. This should be set only when dealing with content security policies and when the use of unsafe-inline is disabled (using nonce-* instead).

Given the following example:

<head>
  <script nonce="THIS_SHOULD_BE_REPLACED">
    partytown = {
      nonce: 'THIS_SHOULD_BE_REPLACED'
    };
  </script>
</head>

The nonce property should be generated by the server, and it should be unique for each request. You can leave a placeholder, as shown in the above example, to facilitate replacement through a regular expression on the server side. For instance, you can use the following code:

html.replace(/THIS_SHOULD_BE_REPLACED/g, nonce);

Description

Partytown is a JavaScript library to run third party scripts into a web worker. The goal is dedicating the main thread to your code, and move other resource-intesive third party scripts, like analytics or tracking services to a different thread, making the website faster and more secure.

Installation

Import this plugin in your _config.ts file to use it:

import lume from "lume/mod.ts";
import partytown from "lume/plugins/partytown.ts";

const site = lume();

site.use(partytown(/* Options */));

export default site;

Add the type="text/partytown" attribute to all scripts that you want to run from the web worker:

<script type="text/partytown">...</script>