ref(svelte): Update component tracking docs with new withSentryConfig approach (#5649)

This patch updates the Svelte component tracking docs with usage instructions for the new approach we recently introduced to the Svelte SDK. Instead of manually adding a preprocessor to their svelte config, users can now simply wrap their config with a Sentry wrapper function that takes care of adding this preprocessor for them. This new approach allows us to make more changes to the config in the future without asking our users every time to change something in their config.

Author: Lms24

src/platforms/javascript/guides/svelte/features/component-tracking.mdx

@@ -13,35 +13,55 @@ To set up component tracking, you need to configure performance monitoring. For
 
 </Alert>
 
-To get started, add the Sentry `componentTrackingPreprocessor` to your `svelte.config.js` file:
+To get started, wrap your Svelte app's config from `svelte.config.js` with our `withSentryConfig` function:
 
 ```javascript {tabTitle: svelte.config.js}
-import * as Sentry from "@sentry/svelte";
+import { withSentryConfig } from "@sentry/svelte";
 
 const config = {
-  preprocess: [
-    Sentry.componentTrackingPreprocessor({
-      // Add the components you want to be tracked to this array.
-      // Specificy `true` to track all components or `false` to disable
-      // tracking entirely
-      // (defaults to `true`)
-      trackComponents: ["Navbar", "PrimaryButton", "LoginForm"],
-      // To disable component initialization spans, set this to `false`.
-      // (defaults to `true`)
-      trackInit: true,
-      // To disable component update spans, set this to `false`
-      // (defaults to `true`)
-      trackUpdates: false,
-    }),
-    // ...
-  ],
-  // ...
+  // Your svelte config
+  compilerOptions: {...},
 };
 
-export default config;
+export default withSentryConfig(config);
 ```
 
-This preprocessor is called at application build time. It inserts a function call to a function in the Sentry SDK into the `<script>` tag of your components before your app is compiled and bundled. The called function takes care of recording the spans by using the Svelte component's lifecycle hooks.
+This wrapper will insert Sentry's component tracking preprocessor into your config. The preprocessor inserts a function call to a function in the Sentry SDK into the `<script>` tag of your components before your app is compiled and bundled.
+
+### Configuration
+
+Once you add `withSentryConfig` around your Svelte config, our SDK will track all your components by default. If you want to customize which components or lifecycle events should be tracked, you can pass additional options to `withSentryConfig`:
+
+```javascript {tabTitle: svelte.config.js}
+import { withSentryConfig } from "@sentry/svelte";
+
+const config = {
+  // Your svelte config
+  compilerOptions: {...},
+};
+
+const sentryOptions = {
+  // Groups all component tracking-related options
+  // (optional)
+  componentTracking: {
+    // Add the components you want to be tracked to this array.
+    // Specificy `true` to track all components or `false` to disable
+    // tracking entirely
+    // (optional, defaults to `true`)
+    trackComponents: ["Navbar", "PrimaryButton", "LoginForm"],
+    // To disable component initialization spans, set this to `false`.
+    // (optional, defaults to `true`)
+    trackInit: true,
+    // To disable component update spans, set this to `false`
+    // (optional, defaults to `true`)
+    trackUpdates: false,
+  },
+};
+
+export default withSentryConfig(config, sentryOptions);
+```
+
+## Component Tracking Spans
 
 This feature adds the following spans to the ongoing transaction:
 
@@ -55,7 +75,7 @@ This feature adds the following spans to the ongoing transaction:
 
 ## Alternative Usage
 
-If you don't want to use our preprocessor to automatically insert the function call at build time, you can call the tracking function manually in every component you would like to see tracked:
+If you don't want to use our `withSentryConfig` wrapper to automatically instrument your components at build time, you can call the tracking function manually in every component you would like to see tracked:
 
 ```javascript {tabTitle: MyComponent.svelte}
 <script>