add withSentryConfig function

Author: Lms24

packages/svelte/src/config.ts

@@ -0,0 +1,76 @@
+import { CompileOptions } from 'svelte/types/compiler';
+import { PreprocessorGroup } from 'svelte/types/compiler/preprocess';
+
+import { componentTrackingPreprocessor, defaultComponentTrackingOptions } from './preprocessors';
+import { ComponentTrackingInitOptions, SentryPreprocessorGroup } from './types';
+
+export type SvelteConfig = {
+  [key: string]: unknown;
+  preprocess?: PreprocessorGroup[] | PreprocessorGroup;
+  compilerOptions?: CompileOptions;
+};
+
+export type SentrySvelteConfigOptions = {
+  componentTracking?: ComponentTrackingInitOptions;
+};
+
+const DEFAULT_SENTRY_OPTIONS: SentrySvelteConfigOptions = {
+  componentTracking: defaultComponentTrackingOptions,
+};
+
+/**
+ * Add Sentry options to the Svelte config to be exported from the user's `svelte.config.js` file.
+ *
+ * @param originalConfig The existing config to be exported prior to adding Sentry
+ * @param sentryOptions The configuration of the Sentry-added options
+ *
+ * @return The wrapped and modified config to be exported
+ */
+export function withSentryConfig(
+  originalConfig: SvelteConfig,
+  sentryOptions?: SentrySvelteConfigOptions,
+): SvelteConfig {
+  const mergedOptions = {
+    ...DEFAULT_SENTRY_OPTIONS,
+    ...sentryOptions,
+  };
+
+  const originalPreprocessors = getOriginalPreprocessorArray(originalConfig);
+  const sentryPreprocessors: SentryPreprocessorGroup[] = [];
+
+  const shouldTrackComponents = mergedOptions.componentTracking && mergedOptions.componentTracking.trackComponents;
+  if (shouldTrackComponents) {
+    // TODO(v8): Remove eslint rule
+    // eslint-disable-next-line deprecation/deprecation
+    sentryPreprocessors.push(componentTrackingPreprocessor(mergedOptions.componentTracking));
+  }
+
+  const dedupedSentryPreprocessors = sentryPreprocessors.filter(
+    sentryPreproc =>
+      originalPreprocessors.find(p => (p as SentryPreprocessorGroup).id === sentryPreproc.id) === undefined,
+  );
+
+  const mergedPreprocessors = [...dedupedSentryPreprocessors, ...originalPreprocessors];
+
+  return {
+    ...originalConfig,
+    preprocess: mergedPreprocessors,
+  };
+}
+
+/**
+ * Standardizes the different ways the user-provided preprocessor option can be specified.
+ * Users can specify an array of preprocessors, one single one or nothing at all.
+ *
+ * @param originalConfig the user-provided svelte config oject
+ * @return an array of preprocessors or an empty array if no preprocessors were specified
+ */
+function getOriginalPreprocessorArray(originalConfig: SvelteConfig): PreprocessorGroup[] {
+  if (originalConfig.preprocess) {
+    if (Array.isArray(originalConfig.preprocess)) {
+      return originalConfig.preprocess;
+    }
+    return [originalConfig.preprocess];
+  }
+  return [];
+}

packages/svelte/src/index.ts

@@ -7,5 +7,9 @@ export * from '@sentry/browser';
 
 export { init } from './sdk';
 
+// TODO(v8): Remove this export
 export { componentTrackingPreprocessor } from './preprocessors';
+
 export { trackComponent } from './performance';
+
+export { withSentryConfig } from './config';

packages/svelte/src/preprocessors.ts

@@ -1,25 +1,30 @@
 import MagicString from 'magic-string';
+import { PreprocessorGroup } from 'svelte/types/compiler/preprocess';
 
-import { ComponentTrackingInitOptions, PreprocessorGroup, TrackComponentOptions } from './types';
+import { ComponentTrackingInitOptions, SentryPreprocessorGroup, TrackComponentOptions } from './types';
 
 export const defaultComponentTrackingOptions: Required<ComponentTrackingInitOptions> = {
   trackComponents: true,
   trackInit: true,
   trackUpdates: true,
 };
 
+export const FIRST_PASS_COMPONENT_TRACKING_PREPROC_ID = 'FIRST_PASS_COMPONENT_TRACKING_PREPROCESSOR';
+
 /**
  * Svelte Preprocessor to inject Sentry performance monitoring related code
  * into Svelte components.
+ *
+ * @deprecated Use `withSentryConfig` which is the new way of making compile-time modifications
+ *             to Svelte apps going forward.
  */
 export function componentTrackingPreprocessor(options?: ComponentTrackingInitOptions): PreprocessorGroup {
   const mergedOptions = { ...defaultComponentTrackingOptions, ...options };
 
   const visitedFiles = new Set<string>();
 
-  return {
-    // This script hook is called whenever a Svelte component's <script>
-    // content is preprocessed.
+  const preprocessor: PreprocessorGroup = {
+    // This script hook is called whenever a Svelte component's <script> content is preprocessed.
     // `content` contains the script code as a string
     script: ({ content, filename, attributes }) => {
       // TODO: Not sure when a filename could be undefined. Using this 'unknown' fallback for the time being
@@ -48,6 +53,13 @@ export function componentTrackingPreprocessor(options?: ComponentTrackingInitOpt
       return { code: updatedCode, map: updatedSourceMap };
     },
   };
+
+  const sentryPreprocessor: SentryPreprocessorGroup = {
+    ...preprocessor,
+    id: FIRST_PASS_COMPONENT_TRACKING_PREPROC_ID,
+  };
+
+  return sentryPreprocessor;
 }
 
 function shouldInjectFunction(

packages/svelte/src/types.ts

@@ -1,40 +1,13 @@
-// The following types were copied from 'svelte/compiler'-internal
-// type definitions
-// see: https://github.com/sveltejs/svelte/blob/master/src/compiler/preprocess/types.ts
-interface Processed {
-  code: string;
-  map?: string | Record<string, unknown>;
-  dependencies?: string[];
-  toString?: () => string;
-}
-
-type MarkupPreprocessor = (options: {
-  content: string;
-  filename?: string;
-}) => Processed | void | Promise<Processed | void>;
-
-type Preprocessor = (options: {
-  /**
-   * The script/style tag content
-   */
-  content: string;
-  attributes: Record<string, string | boolean>;
-  /**
-   * The whole Svelte file content
-   */
-  markup: string;
-  filename?: string;
-}) => Processed | void | Promise<Processed | void>;
+import { PreprocessorGroup } from 'svelte/types/compiler/preprocess';
 
-export interface PreprocessorGroup {
-  markup?: MarkupPreprocessor;
-  style?: Preprocessor;
-  script?: Preprocessor;
+// Adds an id property to the preprocessor object we can use to check for duplication
+// in the preprocessors array
+export interface SentryPreprocessorGroup extends PreprocessorGroup {
+  id?: string;
 }
 
 // Alternatively, we could use a direct from svelte/compiler/preprocess
 // TODO: figure out what's better and roll with that
-// import { PreprocessorGroup } from 'svelte/types/compiler/preprocess';
 
 export type SpanOptions = {
   /**