From 0dee42f775bbe2c5b914cd5d1bb5442a57a1ce15 Mon Sep 17 00:00:00 2001
From: Lukas Stracke <lukas.stracke@sentry.io>
Date: Fri, 19 Aug 2022 18:41:59 +0200
Subject: [PATCH 01/11] feat(svelte): Add Component Tracking

---
 packages/svelte/package.json         |  3 ++
 packages/svelte/rollup.npm.config.js |  7 ++-
 packages/svelte/src/constants.ts     |  8 +++
 packages/svelte/src/index.ts         |  5 ++
 packages/svelte/src/performance.ts   | 76 ++++++++++++++++++++++++++++
 packages/svelte/src/preprocessors.ts | 60 ++++++++++++++++++++++
 packages/svelte/src/types.ts         | 76 ++++++++++++++++++++++++++++
 yarn.lock                            |  5 ++
 8 files changed, 239 insertions(+), 1 deletion(-)
 create mode 100644 packages/svelte/src/constants.ts
 create mode 100644 packages/svelte/src/performance.ts
 create mode 100644 packages/svelte/src/preprocessors.ts
 create mode 100644 packages/svelte/src/types.ts

diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 59d9ae81ea6e..e99591de9c30 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -24,6 +24,9 @@
   "peerDependencies": {
     "svelte": "3.x"
   },
+  "devDependencies": {
+    "svelte": "3.49.0"
+  },
   "scripts": {
     "build": "run-p build:rollup build:types",
     "build:dev": "run-s build",
diff --git a/packages/svelte/rollup.npm.config.js b/packages/svelte/rollup.npm.config.js
index 5a62b528ef44..ae3c7a9a5b8a 100644
--- a/packages/svelte/rollup.npm.config.js
+++ b/packages/svelte/rollup.npm.config.js
@@ -1,3 +1,8 @@
 import { makeBaseNPMConfig, makeNPMConfigVariants } from '../../rollup/index.js';
 
-export default makeNPMConfigVariants(makeBaseNPMConfig());
+export default makeNPMConfigVariants(
+  makeBaseNPMConfig({
+    // Prevent 'svelte/internal' stuff from being included in the built JS
+    packageSpecificConfig: { external: ['svelte/internal'] },
+  }),
+);
diff --git a/packages/svelte/src/constants.ts b/packages/svelte/src/constants.ts
new file mode 100644
index 000000000000..c1783bd02383
--- /dev/null
+++ b/packages/svelte/src/constants.ts
@@ -0,0 +1,8 @@
+// TODO: we might want to call this ui.svelte.init instead because
+// it doesn't only track mounting time (there's no before-/afterMount)
+// but component init to mount time.
+export const UI_SVELTE_MOUNT = 'ui.svelte.mount';
+
+export const UI_SVELTE_UPDATE = 'ui.svelte.update';
+
+export const DEFAULT_COMPONENT_NAME = 'Svelte Component';
diff --git a/packages/svelte/src/index.ts b/packages/svelte/src/index.ts
index 8e25b84c4a0c..67d17d0e5af6 100644
--- a/packages/svelte/src/index.ts
+++ b/packages/svelte/src/index.ts
@@ -1,3 +1,8 @@
+export type { ComponentTrackingInitOptions as ComponentTrackingOptions, TrackingOptions } from './types';
+
 export * from '@sentry/browser';
 
 export { init } from './sdk';
+
+export { componentTrackingPreprocessor } from './preprocessors';
+export { trackComponent } from './performance';
diff --git a/packages/svelte/src/performance.ts b/packages/svelte/src/performance.ts
new file mode 100644
index 000000000000..28103adb70e9
--- /dev/null
+++ b/packages/svelte/src/performance.ts
@@ -0,0 +1,76 @@
+import { getCurrentHub } from '@sentry/browser';
+import { Span, Transaction } from '@sentry/types';
+import { afterUpdate, beforeUpdate, onMount } from 'svelte';
+import { current_component } from 'svelte/internal';
+
+import { DEFAULT_COMPONENT_NAME, UI_SVELTE_MOUNT, UI_SVELTE_UPDATE } from './constants';
+import { TrackingOptions } from './types';
+
+const defaultOptions: TrackingOptions = {
+  trackMount: true,
+  trackUpdates: true,
+};
+
+/**
+ * Tracks the Svelte component's intialization and mounting operation as well as
+ * updates and records them as spans.
+ * This function is injected automatically into your Svelte components' code
+ * if you are using the Sentry componentTrackingPreprocessor
+ */
+export function trackComponent(options: TrackingOptions = defaultOptions): void {
+  const transaction = getActiveTransaction();
+  if (!transaction) {
+    return;
+  }
+
+  const customComponentName = options && options.componentName;
+
+  // current_component.ctor.name is likely to give us the component's name automatically
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  const componentName = `<${customComponentName || current_component.constructor.name || DEFAULT_COMPONENT_NAME}>`;
+
+  options.trackMount && recordMountSpan(transaction, componentName);
+  options.trackUpdates && recordUpdateSpans(componentName);
+}
+
+function recordMountSpan(transaction: Transaction, componentName: string): void {
+  const mountSpan = transaction.startChild({
+    op: UI_SVELTE_MOUNT,
+    description: componentName,
+  });
+
+  onMount(() => {
+    mountSpan.finish();
+  });
+}
+
+function recordUpdateSpans(componentName: string): void {
+  let updateSpan: Span | undefined;
+  beforeUpdate(() => {
+    // We need to get the active transaction again because the initial one could
+    // already be finished or there is no transaction going on, currently.
+    const transaction = getActiveTransaction();
+    if (!transaction) {
+      return;
+    }
+
+    updateSpan = transaction.startChild({
+      op: UI_SVELTE_UPDATE,
+      description: componentName,
+    });
+  });
+
+  afterUpdate(() => {
+    if (!updateSpan) {
+      return;
+    }
+    updateSpan.finish();
+    updateSpan = undefined;
+  });
+}
+
+function getActiveTransaction(): Transaction | undefined {
+  const currentHub = getCurrentHub();
+  const scope = currentHub && currentHub.getScope();
+  return scope && scope.getTransaction();
+}
diff --git a/packages/svelte/src/preprocessors.ts b/packages/svelte/src/preprocessors.ts
new file mode 100644
index 000000000000..d93886f80e95
--- /dev/null
+++ b/packages/svelte/src/preprocessors.ts
@@ -0,0 +1,60 @@
+import { ComponentTrackingInitOptions, PreprocessorGroup, TrackingOptions } from './types';
+
+const defaultComponentTrackingOptions: ComponentTrackingInitOptions = {
+  trackComponents: true,
+  trackMount: true,
+  trackUpdates: true,
+};
+
+/**
+ * Svelte Preprocessor to inject performance monitoring related code
+ * into Svelte components.
+ */
+export function componentTrackingPreprocessor(
+  options: ComponentTrackingInitOptions = defaultComponentTrackingOptions,
+): PreprocessorGroup {
+  return {
+    // 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 }) => {
+      if (!shouldInjectFunction(options.trackComponents, filename)) {
+        return { code: content };
+      }
+
+      const { trackMount, trackUpdates } = options;
+      const trackOptions: TrackingOptions = {
+        trackMount: trackMount === undefined ? true : trackMount,
+        trackUpdates: trackUpdates === undefined ? true : trackUpdates,
+        componentName: getComponentName(filename || ''),
+      };
+
+      const importStmt = 'import { trackComponent } from "@sentry/svelte"\n';
+      const functionCall = `trackComponent(${JSON.stringify(trackOptions)});\n`;
+      console.log(functionCall);
+
+      const updatedCode = `${importStmt}${functionCall}${content}`;
+      return { code: updatedCode };
+    },
+  };
+}
+
+function shouldInjectFunction(
+  trackComponents: ComponentTrackingInitOptions['trackComponents'],
+  filename: string | undefined,
+): boolean {
+  if (!trackComponents || !filename) {
+    return false;
+  }
+  if (Array.isArray(trackComponents)) {
+    // TODO: this probably needs to be a little more robust
+    const componentName = getComponentName(filename);
+    return trackComponents.some(allowed => allowed === componentName);
+  }
+  return true;
+}
+function getComponentName(filename: string): string {
+  const segments = filename.split('/');
+  const componentName = segments[segments.length - 1].replace('.svelte', '');
+  return componentName;
+}
diff --git a/packages/svelte/src/types.ts b/packages/svelte/src/types.ts
new file mode 100644
index 000000000000..b909df59a62e
--- /dev/null
+++ b/packages/svelte/src/types.ts
@@ -0,0 +1,76 @@
+// 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>;
+
+export interface PreprocessorGroup {
+  markup?: MarkupPreprocessor;
+  style?: Preprocessor;
+  script?: Preprocessor;
+}
+
+// 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 = {
+  /**
+   * If true, spans are be recorded between component intialization and Svellte's
+   * onMount lifecycle hook
+   *
+   * defaults to true if component tracking is enabled
+   */
+  trackMount?: boolean;
+
+  /**
+   * If true, spans are recorded between each component's beforeUpdate and afterUpdate
+   * lifecycle hooks
+   *
+   * defaults to true if component tracking is enabled
+   */
+  trackUpdates?: boolean;
+};
+
+/**
+ * Control which components and which operations should be tracked
+ * and recorded as spans
+ */
+export type ComponentTrackingInitOptions = {
+  /**
+   * Control if all your Svelte components should be tracked or only a specified list
+   * of components.
+   * If set to true, all components will be tracked.
+   * If you only want to track a selection of components, specify the component names
+   * as an array.
+   *
+   * defaults to: true
+   */
+  trackComponents: boolean | string[];
+} & SpanOptions;
+
+export type TrackingOptions = {
+  componentName?: string;
+} & SpanOptions;
diff --git a/yarn.lock b/yarn.lock
index b1ffb4ea488c..a92d648e72c2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -24837,6 +24837,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+svelte@3.49.0:
+  version "3.49.0"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.49.0.tgz#5baee3c672306de1070c3b7888fc2204e36a4029"
+  integrity sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==
+
 svgo@^1.0.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"

From e244ff1fcbbfa68854e21bcb943e0569560df066 Mon Sep 17 00:00:00 2001
From: Lukas Stracke <lukas.stracke@sentry.io>
Date: Mon, 29 Aug 2022 15:15:04 +0200
Subject: [PATCH 02/11] use MagicString to modify code and generate maps

apply code review suggestions
fix linter errors
---
 packages/svelte/package.json         |  1 +
 packages/svelte/src/performance.ts   | 12 +++++++++---
 packages/svelte/src/preprocessors.ts | 14 ++++++++++----
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index e99591de9c30..279e6bfeeb14 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -19,6 +19,7 @@
     "@sentry/browser": "7.11.1",
     "@sentry/types": "7.11.1",
     "@sentry/utils": "7.11.1",
+    "magic-string": "^0.26.2",
     "tslib": "^1.9.3"
   },
   "peerDependencies": {
diff --git a/packages/svelte/src/performance.ts b/packages/svelte/src/performance.ts
index 28103adb70e9..e089112eba7a 100644
--- a/packages/svelte/src/performance.ts
+++ b/packages/svelte/src/performance.ts
@@ -15,7 +15,8 @@ const defaultOptions: TrackingOptions = {
  * Tracks the Svelte component's intialization and mounting operation as well as
  * updates and records them as spans.
  * This function is injected automatically into your Svelte components' code
- * if you are using the Sentry componentTrackingPreprocessor
+ * if you are using the Sentry componentTrackingPreprocessor.
+ * Alternatively, you can call it yourself if you don't want to use the preprocessor.
  */
 export function trackComponent(options: TrackingOptions = defaultOptions): void {
   const transaction = getActiveTransaction();
@@ -29,8 +30,13 @@ export function trackComponent(options: TrackingOptions = defaultOptions): void
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
   const componentName = `<${customComponentName || current_component.constructor.name || DEFAULT_COMPONENT_NAME}>`;
 
-  options.trackMount && recordMountSpan(transaction, componentName);
-  options.trackUpdates && recordUpdateSpans(componentName);
+  if (options.trackMount) {
+    recordMountSpan(transaction, componentName);
+  }
+
+  if (options.trackUpdates) {
+    recordUpdateSpans(componentName);
+  }
 }
 
 function recordMountSpan(transaction: Transaction, componentName: string): void {
diff --git a/packages/svelte/src/preprocessors.ts b/packages/svelte/src/preprocessors.ts
index d93886f80e95..44388c496ca9 100644
--- a/packages/svelte/src/preprocessors.ts
+++ b/packages/svelte/src/preprocessors.ts
@@ -1,3 +1,5 @@
+import MagicString from 'magic-string';
+
 import { ComponentTrackingInitOptions, PreprocessorGroup, TrackingOptions } from './types';
 
 const defaultComponentTrackingOptions: ComponentTrackingInitOptions = {
@@ -29,12 +31,16 @@ export function componentTrackingPreprocessor(
         componentName: getComponentName(filename || ''),
       };
 
-      const importStmt = 'import { trackComponent } from "@sentry/svelte"\n';
+      const importStmt = 'import { trackComponent } from "@sentry/svelte";\n';
       const functionCall = `trackComponent(${JSON.stringify(trackOptions)});\n`;
-      console.log(functionCall);
 
-      const updatedCode = `${importStmt}${functionCall}${content}`;
-      return { code: updatedCode };
+      const s = new MagicString(content);
+      s.prepend(functionCall).prepend(importStmt).append('console.log()');
+
+      const updatedCode = s.toString();
+      const updatedSourceMap = s.generateMap().toString();
+
+      return { code: updatedCode, map: updatedSourceMap };
     },
   };
 }

From cb3def2def07a93828506c65209f9930b9c56b95 Mon Sep 17 00:00:00 2001
From: Lukas Stracke <lukas.stracke@sentry.io>
Date: Mon, 29 Aug 2022 15:44:38 +0200
Subject: [PATCH 03/11] start update span as child of mount span if applicable

---
 packages/svelte/src/performance.ts | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/svelte/src/performance.ts b/packages/svelte/src/performance.ts
index e089112eba7a..e71bc9a9b6cc 100644
--- a/packages/svelte/src/performance.ts
+++ b/packages/svelte/src/performance.ts
@@ -30,16 +30,17 @@ export function trackComponent(options: TrackingOptions = defaultOptions): void
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
   const componentName = `<${customComponentName || current_component.constructor.name || DEFAULT_COMPONENT_NAME}>`;
 
+  let mountSpan: Span | undefined = undefined;
   if (options.trackMount) {
-    recordMountSpan(transaction, componentName);
+    mountSpan = recordMountSpan(transaction, componentName);
   }
 
   if (options.trackUpdates) {
-    recordUpdateSpans(componentName);
+    recordUpdateSpans(componentName, mountSpan);
   }
 }
 
-function recordMountSpan(transaction: Transaction, componentName: string): void {
+function recordMountSpan(transaction: Transaction, componentName: string): Span {
   const mountSpan = transaction.startChild({
     op: UI_SVELTE_MOUNT,
     description: componentName,
@@ -48,9 +49,11 @@ function recordMountSpan(transaction: Transaction, componentName: string): void
   onMount(() => {
     mountSpan.finish();
   });
+
+  return mountSpan;
 }
 
-function recordUpdateSpans(componentName: string): void {
+function recordUpdateSpans(componentName: string, mountSpan?: Span): void {
   let updateSpan: Span | undefined;
   beforeUpdate(() => {
     // We need to get the active transaction again because the initial one could
@@ -60,7 +63,12 @@ function recordUpdateSpans(componentName: string): void {
       return;
     }
 
-    updateSpan = transaction.startChild({
+    // If we are mounting the component when the update span is started, we start it as child of the
+    // mount span. Else, we start it as a child of the transaction.
+    const parentSpan =
+      mountSpan && !mountSpan.endTimestamp && mountSpan.transaction === transaction ? mountSpan : transaction;
+
+    updateSpan = parentSpan.startChild({
       op: UI_SVELTE_UPDATE,
       description: componentName,
     });

From 81d12132f0c0baf90e3a1713959c50f4a2053d1f Mon Sep 17 00:00:00 2001
From: Lukas Stracke <lukas.stracke@sentry.io>
Date: Mon, 29 Aug 2022 17:58:54 +0200
Subject: [PATCH 04/11] rework types, options and wording

---
 packages/svelte/src/index.ts         |  5 ++++-
 packages/svelte/src/performance.ts   | 21 ++++++++++++---------
 packages/svelte/src/preprocessors.ts | 28 ++++++++++++++--------------
 packages/svelte/src/types.ts         | 16 ++++++++--------
 4 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/packages/svelte/src/index.ts b/packages/svelte/src/index.ts
index 67d17d0e5af6..40f648a46286 100644
--- a/packages/svelte/src/index.ts
+++ b/packages/svelte/src/index.ts
@@ -1,4 +1,7 @@
-export type { ComponentTrackingInitOptions as ComponentTrackingOptions, TrackingOptions } from './types';
+export type {
+  ComponentTrackingInitOptions as ComponentTrackingOptions,
+  TrackComponentOptions as TrackingOptions,
+} from './types';
 
 export * from '@sentry/browser';
 
diff --git a/packages/svelte/src/performance.ts b/packages/svelte/src/performance.ts
index e71bc9a9b6cc..40505c71053b 100644
--- a/packages/svelte/src/performance.ts
+++ b/packages/svelte/src/performance.ts
@@ -4,9 +4,10 @@ import { afterUpdate, beforeUpdate, onMount } from 'svelte';
 import { current_component } from 'svelte/internal';
 
 import { DEFAULT_COMPONENT_NAME, UI_SVELTE_MOUNT, UI_SVELTE_UPDATE } from './constants';
-import { TrackingOptions } from './types';
+import { TrackComponentOptions } from './types';
 
-const defaultOptions: TrackingOptions = {
+const defaultOptions: Required<Pick<TrackComponentOptions, 'trackMount' | 'trackUpdates'>> &
+  Pick<TrackComponentOptions, 'componentName'> = {
   trackMount: true,
   trackUpdates: true,
 };
@@ -18,24 +19,26 @@ const defaultOptions: TrackingOptions = {
  * if you are using the Sentry componentTrackingPreprocessor.
  * Alternatively, you can call it yourself if you don't want to use the preprocessor.
  */
-export function trackComponent(options: TrackingOptions = defaultOptions): void {
+export function trackComponent(options?: TrackComponentOptions): void {
+  const mergedOptions = { ...defaultOptions, ...options };
+
   const transaction = getActiveTransaction();
   if (!transaction) {
     return;
   }
 
-  const customComponentName = options && options.componentName;
+  const customComponentName = mergedOptions.componentName;
 
   // current_component.ctor.name is likely to give us the component's name automatically
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
   const componentName = `<${customComponentName || current_component.constructor.name || DEFAULT_COMPONENT_NAME}>`;
 
   let mountSpan: Span | undefined = undefined;
-  if (options.trackMount) {
+  if (mergedOptions.trackMount) {
     mountSpan = recordMountSpan(transaction, componentName);
   }
 
-  if (options.trackUpdates) {
+  if (mergedOptions.trackUpdates) {
     recordUpdateSpans(componentName, mountSpan);
   }
 }
@@ -57,14 +60,14 @@ function recordUpdateSpans(componentName: string, mountSpan?: Span): void {
   let updateSpan: Span | undefined;
   beforeUpdate(() => {
     // We need to get the active transaction again because the initial one could
-    // already be finished or there is no transaction going on, currently.
+    // already be finished or there is currently no transaction going on.
     const transaction = getActiveTransaction();
     if (!transaction) {
       return;
     }
 
-    // If we are mounting the component when the update span is started, we start it as child of the
-    // mount span. Else, we start it as a child of the transaction.
+    // If we are mounting the component when the update span is started, we start it as child
+    // of the mount span. Else, we start it as a child of the transaction.
     const parentSpan =
       mountSpan && !mountSpan.endTimestamp && mountSpan.transaction === transaction ? mountSpan : transaction;
 
diff --git a/packages/svelte/src/preprocessors.ts b/packages/svelte/src/preprocessors.ts
index 44388c496ca9..037205994af4 100644
--- a/packages/svelte/src/preprocessors.ts
+++ b/packages/svelte/src/preprocessors.ts
@@ -1,41 +1,41 @@
 import MagicString from 'magic-string';
 
-import { ComponentTrackingInitOptions, PreprocessorGroup, TrackingOptions } from './types';
+import { ComponentTrackingInitOptions, PreprocessorGroup, TrackComponentOptions } from './types';
 
-const defaultComponentTrackingOptions: ComponentTrackingInitOptions = {
+const defaultComponentTrackingOptions: Required<ComponentTrackingInitOptions> = {
   trackComponents: true,
   trackMount: true,
   trackUpdates: true,
 };
 
 /**
- * Svelte Preprocessor to inject performance monitoring related code
+ * Svelte Preprocessor to inject Sentry performance monitoring related code
  * into Svelte components.
  */
-export function componentTrackingPreprocessor(
-  options: ComponentTrackingInitOptions = defaultComponentTrackingOptions,
-): PreprocessorGroup {
+export function componentTrackingPreprocessor(options?: ComponentTrackingInitOptions): PreprocessorGroup {
+  const mergedOptions = { ...defaultComponentTrackingOptions, ...options };
+
   return {
     // 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 }) => {
-      if (!shouldInjectFunction(options.trackComponents, filename)) {
+      if (!shouldInjectFunction(mergedOptions.trackComponents, filename)) {
         return { code: content };
       }
 
-      const { trackMount, trackUpdates } = options;
-      const trackOptions: TrackingOptions = {
-        trackMount: trackMount === undefined ? true : trackMount,
-        trackUpdates: trackUpdates === undefined ? true : trackUpdates,
+      const { trackMount, trackUpdates } = mergedOptions;
+      const trackComponentOptions: TrackComponentOptions = {
+        trackMount,
+        trackUpdates,
         componentName: getComponentName(filename || ''),
       };
 
       const importStmt = 'import { trackComponent } from "@sentry/svelte";\n';
-      const functionCall = `trackComponent(${JSON.stringify(trackOptions)});\n`;
+      const functionCall = `trackComponent(${JSON.stringify(trackComponentOptions)});\n`;
 
       const s = new MagicString(content);
-      s.prepend(functionCall).prepend(importStmt).append('console.log()');
+      s.prepend(functionCall).prepend(importStmt);
 
       const updatedCode = s.toString();
       const updatedSourceMap = s.generateMap().toString();
@@ -46,7 +46,7 @@ export function componentTrackingPreprocessor(
 }
 
 function shouldInjectFunction(
-  trackComponents: ComponentTrackingInitOptions['trackComponents'],
+  trackComponents: Required<ComponentTrackingInitOptions['trackComponents']>,
   filename: string | undefined,
 ): boolean {
   if (!trackComponents || !filename) {
diff --git a/packages/svelte/src/types.ts b/packages/svelte/src/types.ts
index b909df59a62e..d3ee4fc64b61 100644
--- a/packages/svelte/src/types.ts
+++ b/packages/svelte/src/types.ts
@@ -38,18 +38,18 @@ export interface PreprocessorGroup {
 
 export type SpanOptions = {
   /**
-   * If true, spans are be recorded between component intialization and Svellte's
-   * onMount lifecycle hook
+   * If true, spans are be recorded between component intialization and its
+   * onMount lifecycle hook.
    *
-   * defaults to true if component tracking is enabled
+   * Defaults to true if component tracking is enabled
    */
   trackMount?: boolean;
 
   /**
    * If true, spans are recorded between each component's beforeUpdate and afterUpdate
-   * lifecycle hooks
+   * lifecycle hooks.
    *
-   * defaults to true if component tracking is enabled
+   * Defaults to true if component tracking is enabled
    */
   trackUpdates?: boolean;
 };
@@ -66,11 +66,11 @@ export type ComponentTrackingInitOptions = {
    * If you only want to track a selection of components, specify the component names
    * as an array.
    *
-   * defaults to: true
+   * Defaults to true if the preprocessor is used
    */
-  trackComponents: boolean | string[];
+  trackComponents?: boolean | string[];
 } & SpanOptions;
 
-export type TrackingOptions = {
+export type TrackComponentOptions = {
   componentName?: string;
 } & SpanOptions;

From c2af68fd41c03c58f7d30e9f717c82a1cc8ad832 Mon Sep 17 00:00:00 2001
From: Lukas Stracke <lukas.stracke@sentry.io>
Date: Tue, 30 Aug 2022 15:55:17 +0200
Subject: [PATCH 05/11] add unit tests for preprocessor

---
 packages/svelte/src/preprocessors.ts       |   2 +-
 packages/svelte/test/preprocessors.test.ts | 109 +++++++++++++++++++++
 2 files changed, 110 insertions(+), 1 deletion(-)
 create mode 100644 packages/svelte/test/preprocessors.test.ts

diff --git a/packages/svelte/src/preprocessors.ts b/packages/svelte/src/preprocessors.ts
index 037205994af4..0c98d1089e64 100644
--- a/packages/svelte/src/preprocessors.ts
+++ b/packages/svelte/src/preprocessors.ts
@@ -2,7 +2,7 @@ import MagicString from 'magic-string';
 
 import { ComponentTrackingInitOptions, PreprocessorGroup, TrackComponentOptions } from './types';
 
-const defaultComponentTrackingOptions: Required<ComponentTrackingInitOptions> = {
+export const defaultComponentTrackingOptions: Required<ComponentTrackingInitOptions> = {
   trackComponents: true,
   trackMount: true,
   trackUpdates: true,
diff --git a/packages/svelte/test/preprocessors.test.ts b/packages/svelte/test/preprocessors.test.ts
new file mode 100644
index 000000000000..f95f21445008
--- /dev/null
+++ b/packages/svelte/test/preprocessors.test.ts
@@ -0,0 +1,109 @@
+import { componentTrackingPreprocessor, defaultComponentTrackingOptions } from '../src/preprocessors';
+
+function expectComponentCodeToBeModified(
+  preprocessedComponents: {
+    originalCode: string;
+    filename: string;
+    name: string;
+    newCode: string;
+    map: any;
+  }[],
+  options: any,
+) {
+  const expectedImportStmt = 'import { trackComponent } from "@sentry/svelte";\n';
+
+  preprocessedComponents.forEach(cmp => {
+    const expectedFunctionCallOptions = {
+      trackMount: options?.trackMount ?? true,
+      trackUpdates: options?.trackUpdates ?? true,
+      componentName: cmp.name,
+    };
+    const expectedFunctionCall = `trackComponent(${JSON.stringify(expectedFunctionCallOptions)});\n`;
+    expect(cmp.newCode).toBeDefined();
+    expect(cmp.map).toBeDefined();
+    expect(cmp.newCode).toEqual(`${expectedImportStmt}${expectedFunctionCall}${cmp.originalCode}`);
+  });
+}
+
+describe('componentTrackingPreprocessor', () => {
+  it('correctly inits the script preprocessor', () => {
+    const preProc = componentTrackingPreprocessor();
+    expect(preProc.script).toBeDefined();
+    expect(preProc.markup).toBeUndefined();
+    expect(preProc.style).toBeUndefined();
+  });
+
+  it.each([
+    ['no options', undefined],
+    ['default options', defaultComponentTrackingOptions],
+    ['custom options (mount 0, updates 0)', { trackMount: false, trackUpdates: false }],
+    ['custom options (mount 0, updates 1)', { trackMount: false, trackUpdates: true }],
+    ['custom options (mount 1, updates 0)', { trackMount: true, trackUpdates: false }],
+    ['custom options (mount 1, updates 1)', { trackMount: true, trackUpdates: true }],
+  ])('adds the function call to all components if %s are set', (_, options) => {
+    const preProc = componentTrackingPreprocessor(options);
+    const components = [
+      { originalCode: 'console.log(cmp1);', filename: 'components/Cmp1.svelte', name: 'Cmp1' },
+      { originalCode: 'console.log(cmp2);', filename: 'components/Cmp2.svelte', name: 'Cmp2' },
+      { originalCode: 'console.log(cmp3);', filename: 'components/Cmp3.svelte', name: 'Cmp3' },
+    ];
+
+    const preprocessedComponents = components.map(cmp => {
+      const res: any = preProc.script!!({
+        content: cmp.originalCode,
+        filename: cmp.filename,
+        attributes: {},
+        markup: '',
+      });
+      return { ...cmp, newCode: res.code, map: res.map };
+    });
+
+    expectComponentCodeToBeModified(preprocessedComponents, options);
+  });
+
+  it('does not add the function call to any component if `trackComponents` is set to `false`', () => {
+    const preProc = componentTrackingPreprocessor({ trackComponents: false });
+    const components = [
+      { originalCode: 'console.log(cmp1)', filename: 'components/Cmp1.svelte', name: 'Cmp1' },
+      { originalCode: 'console.log(cmp2)', filename: 'components/Cmp2.svelte', name: 'Cmp2' },
+      { originalCode: 'console.log(cmp3)', filename: 'components/Cmp3.svelte', name: 'Cmp3' },
+    ];
+
+    const preprocessedComponents = components.map(cmp => {
+      const res: any = preProc.script!!({
+        content: cmp.originalCode,
+        filename: cmp.filename,
+        attributes: {},
+        markup: '',
+      });
+      return { ...cmp, newCode: res.code, map: res.map };
+    });
+
+    preprocessedComponents.forEach(cmp => {
+      expect(cmp.newCode).toEqual(cmp.originalCode);
+    });
+  });
+
+  it('adds the function call to specific components if specified in `trackComponents`', () => {
+    const preProc = componentTrackingPreprocessor({ trackComponents: ['Cmp1', 'Cmp3'] });
+    const components = [
+      { originalCode: 'console.log(cmp1)', filename: 'components/Cmp1.svelte', name: 'Cmp1' },
+      { originalCode: 'console.log(cmp2)', filename: 'lib/Cmp2.svelte', name: 'Cmp2' },
+      { originalCode: 'console.log(cmp3)', filename: 'lib/subdir/sub/Cmp3.svelte', name: 'Cmp3' },
+    ];
+
+    const [cmp1, cmp2, cmp3] = components.map(cmp => {
+      const res: any = preProc.script!!({
+        content: cmp.originalCode,
+        filename: cmp.filename,
+        attributes: {},
+        markup: '',
+      });
+      return { ...cmp, newCode: res.code, map: res.map };
+    });
+
+    expect(cmp2.newCode).toEqual(cmp2.originalCode);
+
+    expectComponentCodeToBeModified([cmp1, cmp3], { trackMount: true, trackUpdates: true });
+  });
+});

From 65e9366f68c00dad04f3330e8ac953693498feb1 Mon Sep 17 00:00:00 2001
From: Lukas Stracke <lukas.stracke@sentry.io>
Date: Tue, 30 Aug 2022 18:30:23 +0200
Subject: [PATCH 06/11] rename getComponentName -> getBaseName

---
 packages/svelte/src/preprocessors.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/svelte/src/preprocessors.ts b/packages/svelte/src/preprocessors.ts
index 0c98d1089e64..9e3948dc2e53 100644
--- a/packages/svelte/src/preprocessors.ts
+++ b/packages/svelte/src/preprocessors.ts
@@ -28,7 +28,7 @@ export function componentTrackingPreprocessor(options?: ComponentTrackingInitOpt
       const trackComponentOptions: TrackComponentOptions = {
         trackMount,
         trackUpdates,
-        componentName: getComponentName(filename || ''),
+        componentName: getBaseName(filename || ''),
       };
 
       const importStmt = 'import { trackComponent } from "@sentry/svelte";\n';
@@ -54,12 +54,13 @@ function shouldInjectFunction(
   }
   if (Array.isArray(trackComponents)) {
     // TODO: this probably needs to be a little more robust
-    const componentName = getComponentName(filename);
+    const componentName = getBaseName(filename);
     return trackComponents.some(allowed => allowed === componentName);
   }
   return true;
 }
-function getComponentName(filename: string): string {
+
+function getBaseName(filename: string): string {
   const segments = filename.split('/');
   const componentName = segments[segments.length - 1].replace('.svelte', '');
   return componentName;

From d296d12498320ed9d6d4482c5143abde2636edca Mon Sep 17 00:00:00 2001
From: Lukas Stracke <lukas.stracke@sentry.io>
Date: Wed, 31 Aug 2022 11:55:40 +0200
Subject: [PATCH 07/11] handle multiple script tags, context module script
 blocks

---
 packages/svelte/src/preprocessors.ts | 35 +++++++++++++++++++++++-----
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/packages/svelte/src/preprocessors.ts b/packages/svelte/src/preprocessors.ts
index 9e3948dc2e53..5105ab27c254 100644
--- a/packages/svelte/src/preprocessors.ts
+++ b/packages/svelte/src/preprocessors.ts
@@ -15,12 +15,17 @@ export const defaultComponentTrackingOptions: Required<ComponentTrackingInitOpti
 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.
     // `content` contains the script code as a string
-    script: ({ content, filename }) => {
-      if (!shouldInjectFunction(mergedOptions.trackComponents, filename)) {
+    script: ({ content, filename, attributes }) => {
+      // TODO: Not sure when a filename could be undefined. Using this 'unknown' fallback for the time being
+      const finalFilename = filename || 'unknown';
+
+      if (!shouldInjectFunction(mergedOptions.trackComponents, finalFilename, attributes, visitedFiles)) {
         return { code: content };
       }
 
@@ -28,7 +33,7 @@ export function componentTrackingPreprocessor(options?: ComponentTrackingInitOpt
       const trackComponentOptions: TrackComponentOptions = {
         trackMount,
         trackUpdates,
-        componentName: getBaseName(filename || ''),
+        componentName: getBaseName(finalFilename),
       };
 
       const importStmt = 'import { trackComponent } from "@sentry/svelte";\n';
@@ -47,16 +52,34 @@ export function componentTrackingPreprocessor(options?: ComponentTrackingInitOpt
 
 function shouldInjectFunction(
   trackComponents: Required<ComponentTrackingInitOptions['trackComponents']>,
-  filename: string | undefined,
+  filename: string,
+  attributes: Record<string, string | boolean>,
+  visitedFiles: Set<string>,
 ): boolean {
-  if (!trackComponents || !filename) {
+  // We do cannot inject our function multiple times into the same component
+  // This can happen when a component has multiple <script> blocks
+  if (visitedFiles.has(filename)) {
+    return false;
+  }
+  visitedFiles.add(filename);
+
+  // We can't inject our function call into <script context="module"> blocks
+  // because the code inside is not executed when the component is instantiated but
+  // when the module is first imported.
+  // see: https://svelte.dev/docs#component-format-script-context-module
+  if (attributes.context === 'module') {
     return false;
   }
+
+  if (!trackComponents) {
+    return false;
+  }
+
   if (Array.isArray(trackComponents)) {
-    // TODO: this probably needs to be a little more robust
     const componentName = getBaseName(filename);
     return trackComponents.some(allowed => allowed === componentName);
   }
+
   return true;
 }
 

From ad9b6854096eee84ae38d9c37ca578624f95c423 Mon Sep 17 00:00:00 2001
From: Lukas Stracke <lukas.stracke@sentry.io>
Date: Wed, 31 Aug 2022 12:09:05 +0200
Subject: [PATCH 08/11] s/mount/init

---
 packages/svelte/src/constants.ts           |  5 +---
 packages/svelte/src/performance.ts         | 32 +++++++++++-----------
 packages/svelte/src/preprocessors.ts       |  6 ++--
 packages/svelte/src/types.ts               |  9 +++---
 packages/svelte/test/preprocessors.test.ts | 12 ++++----
 5 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/packages/svelte/src/constants.ts b/packages/svelte/src/constants.ts
index c1783bd02383..cb8255040c03 100644
--- a/packages/svelte/src/constants.ts
+++ b/packages/svelte/src/constants.ts
@@ -1,7 +1,4 @@
-// TODO: we might want to call this ui.svelte.init instead because
-// it doesn't only track mounting time (there's no before-/afterMount)
-// but component init to mount time.
-export const UI_SVELTE_MOUNT = 'ui.svelte.mount';
+export const UI_SVELTE_INIT = 'ui.svelte.init';
 
 export const UI_SVELTE_UPDATE = 'ui.svelte.update';
 
diff --git a/packages/svelte/src/performance.ts b/packages/svelte/src/performance.ts
index 40505c71053b..bfbd53b7f749 100644
--- a/packages/svelte/src/performance.ts
+++ b/packages/svelte/src/performance.ts
@@ -3,12 +3,12 @@ import { Span, Transaction } from '@sentry/types';
 import { afterUpdate, beforeUpdate, onMount } from 'svelte';
 import { current_component } from 'svelte/internal';
 
-import { DEFAULT_COMPONENT_NAME, UI_SVELTE_MOUNT, UI_SVELTE_UPDATE } from './constants';
+import { DEFAULT_COMPONENT_NAME, UI_SVELTE_INIT, UI_SVELTE_UPDATE } from './constants';
 import { TrackComponentOptions } from './types';
 
-const defaultOptions: Required<Pick<TrackComponentOptions, 'trackMount' | 'trackUpdates'>> &
+const defaultOptions: Required<Pick<TrackComponentOptions, 'trackInit' | 'trackUpdates'>> &
   Pick<TrackComponentOptions, 'componentName'> = {
-  trackMount: true,
+  trackInit: true,
   trackUpdates: true,
 };
 
@@ -33,30 +33,30 @@ export function trackComponent(options?: TrackComponentOptions): void {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
   const componentName = `<${customComponentName || current_component.constructor.name || DEFAULT_COMPONENT_NAME}>`;
 
-  let mountSpan: Span | undefined = undefined;
-  if (mergedOptions.trackMount) {
-    mountSpan = recordMountSpan(transaction, componentName);
+  let initSpan: Span | undefined = undefined;
+  if (mergedOptions.trackInit) {
+    initSpan = recordInitSpan(transaction, componentName);
   }
 
   if (mergedOptions.trackUpdates) {
-    recordUpdateSpans(componentName, mountSpan);
+    recordUpdateSpans(componentName, initSpan);
   }
 }
 
-function recordMountSpan(transaction: Transaction, componentName: string): Span {
-  const mountSpan = transaction.startChild({
-    op: UI_SVELTE_MOUNT,
+function recordInitSpan(transaction: Transaction, componentName: string): Span {
+  const initSpan = transaction.startChild({
+    op: UI_SVELTE_INIT,
     description: componentName,
   });
 
   onMount(() => {
-    mountSpan.finish();
+    initSpan.finish();
   });
 
-  return mountSpan;
+  return initSpan;
 }
 
-function recordUpdateSpans(componentName: string, mountSpan?: Span): void {
+function recordUpdateSpans(componentName: string, initSpan?: Span): void {
   let updateSpan: Span | undefined;
   beforeUpdate(() => {
     // We need to get the active transaction again because the initial one could
@@ -66,10 +66,10 @@ function recordUpdateSpans(componentName: string, mountSpan?: Span): void {
       return;
     }
 
-    // If we are mounting the component when the update span is started, we start it as child
-    // of the mount span. Else, we start it as a child of the transaction.
+    // If we are initializing the component when the update span is started, we start it as child
+    // of the init span. Else, we start it as a child of the transaction.
     const parentSpan =
-      mountSpan && !mountSpan.endTimestamp && mountSpan.transaction === transaction ? mountSpan : transaction;
+      initSpan && !initSpan.endTimestamp && initSpan.transaction === transaction ? initSpan : transaction;
 
     updateSpan = parentSpan.startChild({
       op: UI_SVELTE_UPDATE,
diff --git a/packages/svelte/src/preprocessors.ts b/packages/svelte/src/preprocessors.ts
index 5105ab27c254..97ad39af3e4f 100644
--- a/packages/svelte/src/preprocessors.ts
+++ b/packages/svelte/src/preprocessors.ts
@@ -4,7 +4,7 @@ import { ComponentTrackingInitOptions, PreprocessorGroup, TrackComponentOptions
 
 export const defaultComponentTrackingOptions: Required<ComponentTrackingInitOptions> = {
   trackComponents: true,
-  trackMount: true,
+  trackInit: true,
   trackUpdates: true,
 };
 
@@ -29,9 +29,9 @@ export function componentTrackingPreprocessor(options?: ComponentTrackingInitOpt
         return { code: content };
       }
 
-      const { trackMount, trackUpdates } = mergedOptions;
+      const { trackInit, trackUpdates } = mergedOptions;
       const trackComponentOptions: TrackComponentOptions = {
-        trackMount,
+        trackInit,
         trackUpdates,
         componentName: getBaseName(finalFilename),
       };
diff --git a/packages/svelte/src/types.ts b/packages/svelte/src/types.ts
index d3ee4fc64b61..d32051ec6a44 100644
--- a/packages/svelte/src/types.ts
+++ b/packages/svelte/src/types.ts
@@ -38,15 +38,16 @@ export interface PreprocessorGroup {
 
 export type SpanOptions = {
   /**
-   * If true, spans are be recorded between component intialization and its
-   * onMount lifecycle hook.
+   * If true, a span is recorded between a component's intialization and its
+   * onMount lifecycle hook. This span tells how long it takes a component
+   * to be created and inserted into the DOM.
    *
    * Defaults to true if component tracking is enabled
    */
-  trackMount?: boolean;
+  trackInit?: boolean;
 
   /**
-   * If true, spans are recorded between each component's beforeUpdate and afterUpdate
+   * If true, a span is recorded between a component's beforeUpdate and afterUpdate
    * lifecycle hooks.
    *
    * Defaults to true if component tracking is enabled
diff --git a/packages/svelte/test/preprocessors.test.ts b/packages/svelte/test/preprocessors.test.ts
index f95f21445008..0f81bc31ee9f 100644
--- a/packages/svelte/test/preprocessors.test.ts
+++ b/packages/svelte/test/preprocessors.test.ts
@@ -14,7 +14,7 @@ function expectComponentCodeToBeModified(
 
   preprocessedComponents.forEach(cmp => {
     const expectedFunctionCallOptions = {
-      trackMount: options?.trackMount ?? true,
+      trackInit: options?.trackInit ?? true,
       trackUpdates: options?.trackUpdates ?? true,
       componentName: cmp.name,
     };
@@ -36,10 +36,10 @@ describe('componentTrackingPreprocessor', () => {
   it.each([
     ['no options', undefined],
     ['default options', defaultComponentTrackingOptions],
-    ['custom options (mount 0, updates 0)', { trackMount: false, trackUpdates: false }],
-    ['custom options (mount 0, updates 1)', { trackMount: false, trackUpdates: true }],
-    ['custom options (mount 1, updates 0)', { trackMount: true, trackUpdates: false }],
-    ['custom options (mount 1, updates 1)', { trackMount: true, trackUpdates: true }],
+    ['custom options (init 0, updates 0)', { trackInit: false, trackUpdates: false }],
+    ['custom options (init 0, updates 1)', { trackInit: false, trackUpdates: true }],
+    ['custom options (init 1, updates 0)', { trackInit: true, trackUpdates: false }],
+    ['custom options (init 1, updates 1)', { trackInit: true, trackUpdates: true }],
   ])('adds the function call to all components if %s are set', (_, options) => {
     const preProc = componentTrackingPreprocessor(options);
     const components = [
@@ -104,6 +104,6 @@ describe('componentTrackingPreprocessor', () => {
 
     expect(cmp2.newCode).toEqual(cmp2.originalCode);
 
-    expectComponentCodeToBeModified([cmp1, cmp3], { trackMount: true, trackUpdates: true });
+    expectComponentCodeToBeModified([cmp1, cmp3], { trackInit: true, trackUpdates: true });
   });
 });

From 3991592b37eeacdc827ad3af2165c3c20a1b4a21 Mon Sep 17 00:00:00 2001
From: Lukas Stracke <lukas.stracke@sentry.io>
Date: Wed, 31 Aug 2022 12:13:08 +0200
Subject: [PATCH 09/11] fix linter error

---
 packages/svelte/test/preprocessors.test.ts | 42 ++++++++++++----------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/packages/svelte/test/preprocessors.test.ts b/packages/svelte/test/preprocessors.test.ts
index 0f81bc31ee9f..4ef46709dca9 100644
--- a/packages/svelte/test/preprocessors.test.ts
+++ b/packages/svelte/test/preprocessors.test.ts
@@ -49,12 +49,14 @@ describe('componentTrackingPreprocessor', () => {
     ];
 
     const preprocessedComponents = components.map(cmp => {
-      const res: any = preProc.script!!({
-        content: cmp.originalCode,
-        filename: cmp.filename,
-        attributes: {},
-        markup: '',
-      });
+      const res: any =
+        preProc.script &&
+        preProc.script({
+          content: cmp.originalCode,
+          filename: cmp.filename,
+          attributes: {},
+          markup: '',
+        });
       return { ...cmp, newCode: res.code, map: res.map };
     });
 
@@ -70,12 +72,14 @@ describe('componentTrackingPreprocessor', () => {
     ];
 
     const preprocessedComponents = components.map(cmp => {
-      const res: any = preProc.script!!({
-        content: cmp.originalCode,
-        filename: cmp.filename,
-        attributes: {},
-        markup: '',
-      });
+      const res: any =
+        preProc.script &&
+        preProc.script({
+          content: cmp.originalCode,
+          filename: cmp.filename,
+          attributes: {},
+          markup: '',
+        });
       return { ...cmp, newCode: res.code, map: res.map };
     });
 
@@ -93,12 +97,14 @@ describe('componentTrackingPreprocessor', () => {
     ];
 
     const [cmp1, cmp2, cmp3] = components.map(cmp => {
-      const res: any = preProc.script!!({
-        content: cmp.originalCode,
-        filename: cmp.filename,
-        attributes: {},
-        markup: '',
-      });
+      const res: any =
+        preProc.script &&
+        preProc.script({
+          content: cmp.originalCode,
+          filename: cmp.filename,
+          attributes: {},
+          markup: '',
+        });
       return { ...cmp, newCode: res.code, map: res.map };
     });
 

From e2e081d866cccb494ef5c02064ed3ace55a1686f Mon Sep 17 00:00:00 2001
From: Lukas Stracke <lukas.stracke@sentry.io>
Date: Wed, 31 Aug 2022 12:29:47 +0200
Subject: [PATCH 10/11] add tests for multiple script blocks in 1 cmp and
 module context script blocks

---
 packages/svelte/test/preprocessors.test.ts | 59 ++++++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/packages/svelte/test/preprocessors.test.ts b/packages/svelte/test/preprocessors.test.ts
index 4ef46709dca9..afa100c63cac 100644
--- a/packages/svelte/test/preprocessors.test.ts
+++ b/packages/svelte/test/preprocessors.test.ts
@@ -112,4 +112,63 @@ describe('componentTrackingPreprocessor', () => {
 
     expectComponentCodeToBeModified([cmp1, cmp3], { trackInit: true, trackUpdates: true });
   });
+
+  it('doesnt inject the function call to the same component more than once', () => {
+    const preProc = componentTrackingPreprocessor();
+    const components = [
+      {
+        originalCode: 'console.log(cmp1)',
+        filename: 'components/Cmp1.svelte',
+        name: 'Cmp1',
+      },
+      {
+        originalCode:
+          'import { trackComponent } from "@sentry/svelte";\ntrackComponent({"trackInit":true,"trackUpdates":true,"componentName":"Cmp1"});\nconsole.log(cmp1)',
+        filename: 'components/Cmp1.svelte',
+        name: 'Cmp1',
+      },
+      {
+        originalCode: 'console.log(cmp2)',
+        filename: 'lib/Cmp2.svelte',
+        name: 'Cmp2',
+      },
+    ];
+
+    const [cmp11, cmp12, cmp2] = components.map(cmp => {
+      const res: any =
+        preProc.script &&
+        preProc.script({
+          content: cmp.originalCode,
+          filename: cmp.filename,
+          attributes: {},
+          markup: '',
+        });
+      return { ...cmp, newCode: res.code, map: res.map };
+    });
+
+    expectComponentCodeToBeModified([cmp11, cmp2], { trackInit: true, trackUpdates: true });
+    expect(cmp12.newCode).toEqual(cmp12.originalCode);
+  });
+
+  it('doesnt inject the function call to a module context script block', () => {
+    const preProc = componentTrackingPreprocessor();
+    const component = {
+      originalCode: 'console.log(cmp2)',
+      filename: 'lib/Cmp2.svelte',
+      name: 'Cmp2',
+    };
+
+    const res: any =
+      preProc.script &&
+      preProc.script({
+        content: component.originalCode,
+        filename: component.filename,
+        attributes: { context: 'module' },
+        markup: '',
+      });
+
+    const processedComponent = { ...component, newCode: res.code, map: res.map };
+
+    expect(processedComponent.newCode).toEqual(processedComponent.originalCode);
+  });
 });

From 067fc0c1198afd79087ffb6a79e322d24ed1e50f Mon Sep 17 00:00:00 2001
From: Lukas Stracke <lukas.stracke@sentry.io>
Date: Wed, 31 Aug 2022 13:29:35 +0200
Subject: [PATCH 11/11] apply code review suggestions

---
 packages/svelte/src/performance.ts   | 9 ++++++---
 packages/svelte/src/preprocessors.ts | 3 +--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/svelte/src/performance.ts b/packages/svelte/src/performance.ts
index bfbd53b7f749..359950e41264 100644
--- a/packages/svelte/src/performance.ts
+++ b/packages/svelte/src/performance.ts
@@ -6,8 +6,11 @@ import { current_component } from 'svelte/internal';
 import { DEFAULT_COMPONENT_NAME, UI_SVELTE_INIT, UI_SVELTE_UPDATE } from './constants';
 import { TrackComponentOptions } from './types';
 
-const defaultOptions: Required<Pick<TrackComponentOptions, 'trackInit' | 'trackUpdates'>> &
-  Pick<TrackComponentOptions, 'componentName'> = {
+const defaultTrackComponentOptions: {
+  trackInit: boolean;
+  trackUpdates: boolean;
+  componentName?: string;
+} = {
   trackInit: true,
   trackUpdates: true,
 };
@@ -20,7 +23,7 @@ const defaultOptions: Required<Pick<TrackComponentOptions, 'trackInit' | 'trackU
  * Alternatively, you can call it yourself if you don't want to use the preprocessor.
  */
 export function trackComponent(options?: TrackComponentOptions): void {
-  const mergedOptions = { ...defaultOptions, ...options };
+  const mergedOptions = { ...defaultTrackComponentOptions, ...options };
 
   const transaction = getActiveTransaction();
   if (!transaction) {
diff --git a/packages/svelte/src/preprocessors.ts b/packages/svelte/src/preprocessors.ts
index 97ad39af3e4f..9102636c045f 100644
--- a/packages/svelte/src/preprocessors.ts
+++ b/packages/svelte/src/preprocessors.ts
@@ -85,6 +85,5 @@ function shouldInjectFunction(
 
 function getBaseName(filename: string): string {
   const segments = filename.split('/');
-  const componentName = segments[segments.length - 1].replace('.svelte', '');
-  return componentName;
+  return segments[segments.length - 1].replace('.svelte', '');
 }