docs: add Solid integration (#551)

QwikDev · Feb 4, 2024 · 1adeef6 · 1adeef6
1 parent 759fc6b
commit 1adeef6
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 0 deletions.
diff --git a/docs/_table-of-contents.md b/docs/_table-of-contents.md
@@ -22,6 +22,7 @@
   - [React](/react)
   - [Remix](/remix)
   - [Shopify Hydrogen](/shopify-hydrogen)
+  - [Solid](/solid)
   - [SvelteKit](/sveltekit)
 - [Configuration](/configuration)
   - [Overview](/configuration)

diff --git a/docs/integrations.md b/docs/integrations.md
@@ -14,6 +14,7 @@ Partytown can work with any HTML page, and doesn't require a specific framework.
 - [React](/react)
 - [Remix](/remix)
 - [Shopify Hydrogen](/shopify-hydrogen)
+- [Solid](/solid)
 - [SvelteKit](/sveltekit)
 
 See something missing and would like to contribute? Please [open an issue](https://github.com/BuilderIO/partytown/issues/new/choose) and we'd love to work with you to get your integration up and running and listed here. It may be as simple as just writing a doc, similar to the ones above, detailing how to best implement Partytown in the framework or service.
diff --git a/docs/solid.md b/docs/solid.md
@@ -0,0 +1,50 @@
+---
+title: Solid
+---
+
+To setup Partytown in an Solid project take the following steps.
+
+## Installation
+
+Use your favorite package manager to install `@builder.io/partytown` dependency and
+copy the Partytown files to the local filesystem using the Vite plugin.
+Adopting [this strategy](https://partytown.builder.io/copy-library-files#vite) from the Partytown + Vite docs:
+
+```js
+// vite.config.js
+...
+import { join } from 'path';
+import { partytownVite } from '@builder.io/partytown/utils';
+
+export default defineConfig({
+  plugins: [
+    ...
+    partytownVite({
+      dest: join(__dirname, 'dist', '~partytown'),
+    }),
+  ],
+  ...
+});
+```
+
+## Script Setup
+
+The snippet below shows you how to setup Partytown scripts in your `index.html` file. The first script tag takes the Partytown [configuration](/configuration). The second script tag references the Partytown JS file and the third file takes the third-party scripts to be loaded on the web-worker.
+
+```html
+<head>
+  <!-- Partytown config properties -->
+  <script>
+    partytown = {
+      ...
+    };
+  </script>
+
+  <!-- Inlined Partytown Snippet -->
+  <script src="/~partytown/debug/partytown.js"></script>
+  <script type="text/partytown">
+    console.log("New Partytown script.");
+    console.log("Third-Party script goes here!");
+  </script>
+</head>
+```