Skip to content

Commit

Permalink
docs: docs site (#64)
Browse files Browse the repository at this point in the history
  • Loading branch information
adamdbradley authored Feb 3, 2022
1 parent 7d85905 commit 410b52a
Show file tree
Hide file tree
Showing 104 changed files with 1,841 additions and 542 deletions.
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
.cache/
.next/
.DS_Store
/dist/
/docs/site/dist/
/docs/site/src/table-of-contents.ts
/docs/site/src/pages/
node_modules/
/integration/
/lib/
Expand Down
34 changes: 7 additions & 27 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,33 +11,13 @@
Partytown is a lazy-loaded library to help relocate resource intensive scripts into a [web worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API), and off of the [main thread](https://developer.mozilla.org/en-US/docs/Glossary/Main_thread). Its goal is to help speed up sites by dedicating the main thread to your code, and offloading third-party scripts to a web worker.

The philosophy is that the main thread should be dedicated to your code, and any scripts that are not required to be in the [critical path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path) should be moved to a web worker. Main thread performance is, without question, more important than web worker thread performance. See the [example page](https://partytown.builder.io/example/) and [test pages](https://partytown.builder.io/) for some live demos.

[Getting Started](https://github.com/BuilderIO/partytown/wiki/Getting-Started)

![Without Partytown and With Partytown: Your code and third-party code compete for main thread resources](https://user-images.githubusercontent.com/452425/149344822-53154491-fd70-47ad-8c92-3ff5e4ccb4ec.jpeg)

## Docs

- [Introduction](https://github.com/BuilderIO/partytown/wiki)
- [Third-Party Scripts](https://github.com/BuilderIO/partytown/wiki#negative-impacts-from-third-party-scripts)
- [Goals](https://github.com/BuilderIO/partytown/wiki#goals)
- [Web Workers](https://github.com/BuilderIO/partytown/wiki#web-workers)
- [Trade-Offs](https://github.com/BuilderIO/partytown/wiki#trade-offs)
- [Use-Cases](https://github.com/BuilderIO/partytown/wiki#use-cases)
- [How Does It Work?](https://github.com/BuilderIO/partytown/wiki/How-Does-It-Work%3F)
- [Getting Started](https://github.com/BuilderIO/partytown/wiki/Getting-Started)
- [React](https://github.com/BuilderIO/partytown/wiki/Getting-Started#react)
- [Webpack](https://github.com/BuilderIO/partytown/wiki/Getting-Started#webpack)
- [Configuration](https://github.com/BuilderIO/partytown/wiki/Configuration)
- [Forwarding Events and Triggers](https://github.com/BuilderIO/partytown/wiki/Forwarding-Events-and-Triggers)
- [Sandboxing](https://github.com/BuilderIO/partytown/wiki/Sandboxing)
- [Proxying Requests](https://github.com/BuilderIO/partytown/wiki/Proxying-Requests)
- [Integrating Services](https://github.com/BuilderIO/partytown/wiki/Integrating-Services)
- [Debugging](https://github.com/BuilderIO/partytown/wiki/Debugging)
- [Enabling Atomics](https://github.com/BuilderIO/partytown/wiki/Enabling-Atomics)
- [Distribution](https://github.com/BuilderIO/partytown/wiki/Distribution)
- [Browser Support](https://github.com/BuilderIO/partytown/wiki/Browser-Support)
The philosophy is that the main thread should be dedicated to your code, and any scripts that are not required to be in the [critical path](https://developers.google.com/web/fundamentals/performance/critical-rendering-path) should be moved to a web worker. Main thread performance is, without question, more important than web worker thread performance. See the [test pages](https://partytown.builder.io/) for some live demos.

- [Getting Started](https://partytown.builder.io/getting-started)
- [Integrations](https://partytown.builder.io/integrations)
- [Configuration](https://partytown.builder.io/configuration)

![Without Partytown and With Partytown: Your code and third-party code compete for main thread resources](https://user-images.githubusercontent.com/452425/152363590-89d3b9a5-35c7-4c12-8f3e-c8b5ce4bb267.png)

## Community

Expand Down
1 change: 0 additions & 1 deletion docs/README.md

This file was deleted.

26 changes: 20 additions & 6 deletions docs/_table-of-contents.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,32 @@
- [Improving Performance](/improving-performance)
- [How Does It Work?](/how-does-partytown-work)
- [Trade-Offs](/trade-offs)
- [Browser Support](/browser-support)
- [Getting Started](/getting-started)
- [Installation](/getting-started)
- [Overview](/getting-started)
- [Copy Library Files](/copy-library-files)
- [Script Updates](/script-updates)
- [Partytown Scripts](/partytown-scripts)
- [Atomics](/atomics)
- [Distribution](/distribution)
- [Integrations](/integrations)
- [React](/react)
- [HTML](/html)
- [Configuration](/configuration)
- [Overview](/configuration)
- [Proxying Requests](/proxying-requests)
- [Forwarding Events](/forwarding-events)
- [Sandboxing](/sandboxing)
- [Debugging](/debugging)
- [Integrations](/integrations)
- [Third-Party Services](/third-party-services)
- [Atomics](/atomics)
- [Distribution](/distribution)
- [Browser Support](/browser-support)
- [Common Services](/common-services)
- [Facebook Pixel](/facebook-pixel)
- [Google Tag Manager](/google-tag-manager)
- [Tests](/tests/)
- [End-to-end Tests](/tests/)
- [Services](/tests/benchmarks/services/)
- [Benchmark](/tests/benchmarks/)
- [Community](https://github.com/BuilderIO/partytown)
- [Github](https://github.com/BuilderIO/partytown)
- [Discord](https://discord.gg/tw5qMfgQ)
- [@QwikDev](https://twitter.com/QwikDev)
- [@Builderio](https://twitter.com/builderio)
1 change: 0 additions & 1 deletion docs/atomics.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
---
title: Atomics
description: Atomics
---

Partytown will use [Atomics](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics) when they're enabled by the browser. Some of the advantages include:
Expand Down
5 changes: 3 additions & 2 deletions docs/browser-support.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
---
title: Browser Support
description: Browser Support
---

Partytown works to ensure that all browsers can still run third-party scripts, whether they have support for service workers, atomics, or neither. This means if you're supporting legacy browsers such as IE11, the scripts should continue to work as if Partytown wasn't being used.
Expand All @@ -13,9 +12,11 @@ At its core, Partytown uses Service Workers or Atomics to do its synchronous com
1. If the browser and site do not have support for Atomics, it'll then check to see if the browser has support for [Service Workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API). Currently this is the most commonly used one.
1. If the browser does not have support for Service Workers or Atomics, it'll then find all the `type="text/partytown"` scripts and reset them to be traditional scripts and execute normally.

> Note: Atomics are still experimental, and also require specific server-side response headers for them to work. Please see the [Enabling Atomics](https://github.com/BuilderIO/partytown/wiki/Enabling-Atomics) section for more info.
> Note: Atomics are still experimental, and also require specific server-side response headers for them to work. Please see the [Enabling Atomics](/atomics) section for more info.
## Web API Feature Support

- [Atomics](https://caniuse.com/mdn-javascript_builtins_atomics)
- [JavaScript Proxy](https://caniuse.com/proxy)
- [Service Workers](https://caniuse.com/serviceworkers)
- [Web Workers](https://caniuse.com/webworkers)
16 changes: 16 additions & 0 deletions docs/common-services.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
---
title: Common Services
---

Partytown already comes with a few components for commonly used Services. Please see [Services](/services) before manually configuring the `forward` property.

| Service | Forward Config |
| -------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
| [Adobe Launch](https://experienceleague.adobe.com/docs/experience-platform/tags/client-side/satellite-object.html?lang=en) | `"_satellite.track"` |
| [Facebook Pixel](https://www.facebook.com/business/help/952192354843755?id=1205376682832142) | `"fbq"` |
| [Freshpaint](https://documentation.freshpaint.io/) | `"freshpaint.addPageviewProperties","freshpaint.identify","freshpaint.track"` |
| [Google Tag Manager](https://developers.google.com/tag-manager/quickstart) | `"dataLayer.push"` |
| [Hubspot Tracking](https://developers.hubspot.com/docs/api/events/tracking-code) | `"_hsq.push"` |
| [Intercom](https://developers.intercom.com/installing-intercom/docs/intercom-javascript) | `"Intercom"` |
| [Klaviyo](https://developers.klaviyo.com/en/docs/javascript-api) | `"_learnq.push"` |
| [TikTok Pixel](https://ads.tiktok.com/marketing_api/docs?rid=959icq5stjr&id=1701890973258754) | `"ttq.track","ttq.page","ttq.load"` |
13 changes: 6 additions & 7 deletions docs/configuration.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
---
title: Configuration
description: Configuration
---

Partytown does not require a config for it to work, however a config can be set to change the defaults. At the lowest level, it's configured by setting the `window.partytown = {...}` object before the Partytown snippet script. However, higher-level integrations, such as the `<Partytown/>` component found in `@builder.io/partytown/react`, should provide utilities to make setting the config easier

| Config | Description |
| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `debug` | When `true`, Partytown scripts are not inlined and not minified. See the [Debugging](https://github.com/BuilderIO/partytown/wiki/Debugging) docs on how to enable more logging. |
| `forward` | An array of strings representing function calls on the main thread to forward to the web worker. See [Forwarding Events and Triggers](https://github.com/BuilderIO/partytown/wiki/Forwarding-Events-and-Triggers) for more info. |
| `lib` | Path where the Partytown library can be found your server. Note that the path must both start and end with a `/` character, and the files must be hosted from the same origin as the webpage. Default is `/~partytown/` |
| `resolveUrl` | Hook that is called to resolve URLs which can be used to modify URLs. The hook uses the API: `resolveUrl(url: URL, location: URL, method: string)`. See the [Proxying Requests](https://github.com/BuilderIO/partytown/wiki/Proxying-Requests) for more information. |
| Config | Description |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `debug` | When `true`, Partytown scripts are not inlined and not minified. See the [Debugging](/Debugging) docs on how to enable more logging. |
| `forward` | An array of strings representing function calls on the main thread to forward to the web worker. See [Forwarding Events and Triggers](/forwarding-events) for more info. |
| `lib` | Path where the Partytown library can be found your server. Note that the path must both start and end with a `/` character, and the files must be hosted from the same origin as the webpage. Default is `/~partytown/` |
| `resolveUrl` | Hook that is called to resolve URLs which can be used to modify URLs. The hook uses the API: `resolveUrl(url: URL, location: URL, method: string)`. See the [Proxying Requests](/proxying-requests) for more information. |

## Vanilla Config

Expand Down
61 changes: 60 additions & 1 deletion docs/copy-library-files.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,63 @@
---
title: Copy Library Files
description: Copy Library Files
---

The [@builder.io/partytown](https://www.npmjs.com/package/@builder.io/partytown) NPM package provides the static `lib` files that need to be served from your site. Since Partytown is using a service worker, these files must be served from the same origin as your site, and cannot be hosted from a CDN. Each site is different, and how the Partytown `lib` files are hosted depends on individual setup.

The `/~partytown/` directory should serve the static files found within [@builder.io/partytown/lib](https://cdn.jsdelivr.net/npm/@builder.io/partytown/lib/). The quickest way is to copy the `lib` directory into a public `/~partytown` directory within your static server. Another option would be to set up a copy task within the project's bundler, or create a build step.

You can also use the [lib config](/configuration) if your site must host these files from a directory other than the default `/~partytown/`.

### Copy Task Command

For convenience, the Partytown CLI provides a `copylib` task. The last argument should be the directory where the Partytown lib files should be copied too. In the example below, the lib files are copying to the directory `public/~partytown`, relative to the current working directory:

```bash
partytown copylib public/~partytown
```

This command can be used before a build script. Below is an example of copying the Partytown lib files before a Nextjs build command, using npm scripts:

```json
{
"scripts": {
"build": "npm run partytown && next build",
"partytown": "partytown copylib public/~partytown"
}
}
```

### Copy Task API

The same code that the `partytown copylib` CLI task uses, is also exposed as an API and can be imported by any NodeJS script. Below is an example of importing the `@builder.io/partytown/utils` API and copying the lib files to the given directory. Both examples of an ESM import or CommonJS require should work.

```js
import { copyLibFiles } from 'builder.io/partytown/utils'; // ESM
// const { copyLibFiles } = require('builder.io/partytown/utils'); // CommonJS

async function myBuildTask() {
await copyLibFiles('path/to/public/~partytown');
}
```

### Webpack

Below is an example of using [Webpack's copy plugin](https://webpack.js.org/plugins/copy-webpack-plugin/) to copy the source `lib` directory found in the [@builder.io/partytown](https://www.npmjs.com/package/@builder.io/partytown) package, to the `public/~partytown/` directory:

```js
const CopyPlugin = require('copy-webpack-plugin');
const partytown = require('@builder.io/partytown/utils');

module.exports = {
plugins: [
new CopyPlugin({
patterns: [
{
from: partytown.libDirPath(),
to: path.join(__dirname, 'public', '~partytown'),
},
],
}),
],
};
```
5 changes: 2 additions & 3 deletions docs/debugging.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
---
title: Debugging
description: Debugging
---

With `debug` mode and logging enabled, below is an example of the Partytown logs showing all calls, getters and setters:

![Partytown Debug Console Logs](https://user-images.githubusercontent.com/452425/131688576-e207cb15-7ce5-4009-a358-3e3093d51957.png)

The [debug config](https://github.com/BuilderIO/partytown/wiki/Configuration) must be `true` in order to see more verbose logging messages. The config table below lists all of the possible log configurations.
The [debug config](/configuration) must be `true` in order to see more verbose logging messages. The config table below lists all of the possible log configurations.

| Log Config Property | Description |
| ----------------------- | ----------------------------------- |
Expand Down Expand Up @@ -41,4 +40,4 @@ Example enabling debugging and logging all setters:
</html>
```

Please see the [debug file docs](https://github.com/BuilderIO/partytown/wiki/Distribution#libdebug) more information about the distribution.
Please see the [debug file docs](/distribution#libdebug) more information about the distribution.
Loading

1 comment on commit 410b52a

@vercel
Copy link

@vercel vercel bot commented on 410b52a Feb 3, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.