From 31b0bc87a4f6f652d9007810026e99756a32cc46 Mon Sep 17 00:00:00 2001 From: Mark Leung <93582667+rotate-mark@users.noreply.github.com> Date: Mon, 16 May 2022 19:32:05 +0100 Subject: [PATCH] Add options to partytown integration (#3380) * Add options to partytown integration * Update doc --- .changeset/silent-books-train.md | 5 +++ packages/integrations/partytown/README.md | 32 ++++++++++++++++++++ packages/integrations/partytown/src/index.ts | 13 ++++++-- 3 files changed, 48 insertions(+), 2 deletions(-) create mode 100644 .changeset/silent-books-train.md diff --git a/.changeset/silent-books-train.md b/.changeset/silent-books-train.md new file mode 100644 index 0000000000..eec5b12825 --- /dev/null +++ b/.changeset/silent-books-train.md @@ -0,0 +1,5 @@ +--- +'@astrojs/partytown': patch +--- + +Add config options for integration diff --git a/packages/integrations/partytown/README.md b/packages/integrations/partytown/README.md index 6452928cd7..2c10f6af31 100644 --- a/packages/integrations/partytown/README.md +++ b/packages/integrations/partytown/README.md @@ -59,6 +59,38 @@ Partytown should be ready-to-use with zero config. If you have an existing 3rd p If you open the "Network" tab from [your browser's dev tools](https://developer.chrome.com/docs/devtools/open/), you should see the `partytown` proxy intercepting this request. +## Configuration + +### config.debug + +You can set debug mode using this integration's `config.debug` option. If `config.debug` is unset, it will fall back to `true` if the command is `dev`. + +```js +// astro.config.mjs +export default { + integrations: [partytown({ + // Example: Disable debug mode. + config: { debug: false }, + })], +} +``` + +### config.forward + +Because we’re moving third-party scripts to a web worker, the main thread needs to know which variables to patch on window, and when these services are called, the data is correctly forwarded to the web worker. You can to set it on the `config.forward` option. + +```js +// astro.config.mjs +export default { + integrations: [partytown({ + // Example: Add dataLayer.push as a forwarding-event. + config: { forward: ["dataLayer.push"] }, + })], +} +``` + +## Read more + [Head to the Partytown docs](https://partytown.builder.io/configuration) for configuration options and more usage examples. You can also check our [Astro Integration Documentation][astro-integration] for more on integrations. [astro-integration]: https://docs.astro.build/en/guides/integrations-guide/ diff --git a/packages/integrations/partytown/src/index.ts b/packages/integrations/partytown/src/index.ts index 7f235b776f..24b0288a75 100644 --- a/packages/integrations/partytown/src/index.ts +++ b/packages/integrations/partytown/src/index.ts @@ -7,7 +7,14 @@ import { createRequire } from 'module'; import path from 'path'; const resolve = createRequire(import.meta.url).resolve; -export default function createPlugin(): AstroIntegration { +type PartytownOptions = { + config?: { + forward?: string[]; + debug?: boolean; + } +} | undefined; + +export default function createPlugin(options: PartytownOptions): AstroIntegration { let config: AstroConfig; let partytownSnippetHtml: string; const partytownEntrypoint = resolve('@builder.io/partytown/package.json'); @@ -16,7 +23,9 @@ export default function createPlugin(): AstroIntegration { name: '@astrojs/partytown', hooks: { 'astro:config:setup': ({ config: _config, command, injectScript }) => { - partytownSnippetHtml = partytownSnippet({ debug: command === 'dev' }); + const forward = options?.config?.forward || [] + const debug = options?.config?.debug || command === 'dev' + partytownSnippetHtml = partytownSnippet({ debug, forward }); injectScript('head-inline', partytownSnippetHtml); }, 'astro:config:done': ({ config: _config }) => {