From c9be0a15c9d372baefcca3a89c02e76d053addfd Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Wed, 2 Aug 2023 01:19:26 -0700
Subject: [PATCH] docs: overhaul SvelteKit guide (#436)

* docs: overhaul SvelteKit guide

* fix building in clean repo

* remove unnecessary step

* Update sveltekit.md
---
 docs/sveltekit.md | 143 +++++++++++++---------------------------------
 1 file changed, 39 insertions(+), 104 deletions(-)

diff --git a/docs/sveltekit.md b/docs/sveltekit.md
index 9231c8c0..d365e6c5 100644
--- a/docs/sveltekit.md
+++ b/docs/sveltekit.md
@@ -2,13 +2,14 @@
 title: SvelteKit
 ---
 
-SvelteKit does not offer any built in integrations, so we will add Partytown manually. Credit belongs to [monogram.io](https://monogram.io/blog/add-partytown-to-svelte) for this guide.
+SvelteKit uses Vite to build, so we can use `partytownVite`.
 
 1. Add the Partytown script to `src/routes/+layout.svelte`
 2. Copy the Partytown files to the local filesystem using the Vite plugin
-3. Reverse-Proxying scripts 
-4. Then adding 3rd party scripts
-
+3. Optional: reverse-proxying scripts
+4. Optional: `svelte-preprocess` configuration
+5. Then adding 3rd party scripts
+   
 ## 1. Add the Partytown script to `src/routes/+layout.svelte`
 
 Adapting from [the HTML integration guide](https://partytown.builder.io/html)
@@ -17,18 +18,7 @@ Adapting from [the HTML integration guide](https://partytown.builder.io/html)
 // src/routes/+layout.svelte
 
 <script>
-  import { onMount } from 'svelte'
   import { partytownSnippet } from '@builder.io/partytown/integration'
-
-  // Add the Partytown script to the DOM head
-  let scriptEl
-  onMount(
-    () => {
-      if (scriptEl) {
-        scriptEl.textContent = partytownSnippet()
-      }
-    }
-  )
 </script>
 
 <svelte:head>
@@ -40,14 +30,13 @@ Adapting from [the HTML integration guide](https://partytown.builder.io/html)
     }
   </script>
 
-  <!-- `partytownSnippet` is inserted here -->
-  <script bind:this={scriptEl}></script>
+  {@html '<script>' + partytownSnippet() + '</script>'}
 </svelte:head>
 ```
 
 ## 2. 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:
+Adopting [this strategy](https://partytown.builder.io/copy-library-files#vite) from the Partytown + Vite docs:
 
 ```js
 // vite.config.js
@@ -61,8 +50,7 @@ const config = {
   plugins: [
     sveltekit(),
     partytownVite({
-      // `dest` specifies where files are copied to in production
-      dest: join(process.cwd(), 'static', '~partytown')
+      dest: join(process.cwd(), '.svelte-kit/output/client/~partytown')
     })
   ]
 }
@@ -70,107 +58,54 @@ const config = {
 export default config
 ```
 
-## 3. Reverse-Proxying scripts 
-
-This will vary depending on hosting platform. See [Partytown's recommended guides](https://partytown.builder.io/proxying-requests#reverse-proxy).
-
-```svelte
-// src/routes/+layout.svelte
-
-<script>
-  partytown = {
-    forward: ['dataLayer.push'],
-    resolveUrl: (url) => {
-      const siteUrl = 'https://monogram.io/proxytown'
-
-      if (url.hostname === 'www.googletagmanager.com') {
-        const proxyUrl = new URL(`${siteUrl}/gtm`)
-
-        const gtmId = new URL(url).searchParams.get('id')
-        gtmId && proxyUrl.searchParams.append('id', gtmId)
-
-        return proxyUrl
-      } else if (url.hostname === 'www.google-analytics.com') {
-        const proxyUrl = new URL(`${siteUrl}/ga`)
-
-        return proxyUrl
-      }
-
-      return url
-    }
-  }
-</script>
-```
+## 3. Optional: reverse-proxying scripts 
 
-## 4. Then adding 3rd party scripts
+This will only be necessary depending on which scripts you are using. The implementation will vary depending on hosting platform. See [Partytown's recommended guides](https://partytown.builder.io/proxying-requests#reverse-proxy).
 
-This is where we FINALLY use party town to add those scripts (note `type="text/partytown"` below). This example shows Google Tag Manager.
+## 4. Optional: `svelte-preprocess` configuration
 
+Most users will be using `vitePreprocess` and will not need to update their `svelte.config.js` file. However, if you're are using `svelte-preprocess`, you will need to set the `preserve` option:
 ```js
 // svelte.config.js
 
 const config = {
-  preprocess: [
-    preprocess({
-      preserve: ['partytown']
-    })
-  ],
+  preprocess: preprocess({
+    preserve: ['partytown']
+  })
   ...
 }
 ```
 
-and
+## 5. Then adding 3rd party scripts
+
+This is where we FINALLY use partytown to add those scripts (note `type="text/partytown"` below). This example shows Google Tag Manager. Putting it together with the previous changes, our `+layout.svelte` looks like:
 
 ```svelte
 // src/routes/+layout.svelte
 
-<svelte:head>
-  <script>
-    // Config options
-    partytown = {
-      forward: ['dataLayer.push'],
-      resolveUrl: (url) => {
-        const siteUrl = 'https://example.com/proxytown'
-
-        if (url.hostname === 'www.googletagmanager.com') {
-          const proxyUrl = new URL(`${siteUrl}/gtm`)
-
-          const gtmId = new URL(url).searchParams.get('id')
-          gtmId && proxyUrl.searchParams.append('id', gtmId)
-
-          return proxyUrl
-        } else if (
-          url.hostname === 'www.google-analytics.com'
-        ) {
-          const proxyUrl = new URL(`${siteUrl}/ga`)
-
-          return proxyUrl
-        }
+<script>
+	import { partytownSnippet } from '@builder.io/partytown/integration'
+</script>
 
-        return url
-      }
-    }
-  </script>
-  <!-- Insert `partytownSnippet` here -->
-  <script bind:this={scriptEl}></script>
-
-  <!-- GTM script + config -->
-  <script
-    type="text/partytown"
-    src="https://www.googletagmanager.com/gtag/js?id=YOUR-ID-HERE"></script>
-  <script type="text/partytown">
-    window.dataLayer = window.dataLayer || []
-
-    function gtag() {
-      dataLayer.push(arguments)
-    }
+<slot />
 
-    gtag('js', new Date())
-    gtag('config', 'YOUR-ID-HERE', {
-      page_path: window.location.pathname
-    })
-  </script>
+<svelte:head>
+	<script>
+		partytown = {
+			forward: ['dataLayer.push']
+		};
+	</script>
+
+	{@html '<script>' + partytownSnippet() + '</script>'}
+
+	<script type="text/partytown" src="https://www.googletagmanager.com/gtag/js?id=G-ZX7H2KPXNZ"></script>
+	<script type="text/partytown">
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+		gtag('config', 'G-ZX7H2KPXNZ');
+	</script>
 </svelte:head>
 ```
 
-Reminder to visit https://monogram.io/blog/add-partytown-to-svelte if you need a blog-style guide on this.
+Acknowledgements: credit belongs to monogram.io for [an earlier version of this guide](https://monogram.io/blog/add-partytown-to-svelte).