feat(sveltekit): Add sentrySvelteKitPlugin (#7788)

Add the `sentrySvelteKitPlugin` vite plugin to the SvelteKit SDK which will replace the `withSentryViteConfig` wrapper. Currently, this plugin does exactly what the wrapper is doing, namely, adding the injectInitPlugin. In the future, this plugin will add the source maps plugin.

Author: Lms24

packages/sveltekit/src/config/index.ts

@@ -1,2 +1,2 @@
 export * from './server';
-export * from './config';
+export * from './vite';

packages/sveltekit/src/index.server.ts

@@ -4,7 +4,7 @@
 // Some of the exports collide, which is not allowed, unless we redifine the colliding
 // exports in this file - which we do below.
 export * from './client';
-export * from './config';
+export * from './vite';
 export * from './server';
 
 import type { Integration, Options, StackParser } from '@sentry/types';

packages/sveltekit/src/index.types.ts

@@ -0,0 +1,2 @@
+export { withSentryViteConfig } from './withSentryViteConfig';
+export { sentrySvelteKitPlugin } from './sentrySvelteKitPlugin';

packages/sveltekit/src/vite/index.ts

@@ -1,9 +1,10 @@
 import { logger } from '@sentry/utils';
-import * as fs from 'fs';
 import MagicString from 'magic-string';
 import * as path from 'path';
 import type { Plugin, TransformResult } from 'vite';
 
+import { getUserConfigFile } from './utils';
+
 const serverIndexFilePath = path.join('@sveltejs', 'kit', 'src', 'runtime', 'server', 'index.js');
 const devClientAppFilePath = path.join('generated', 'client', 'app.js');
 const prodClientAppFilePath = path.join('generated', 'client-optimized', 'app.js');
@@ -59,19 +60,3 @@ function addSentryConfigFileImport(
 
   return { code: ms.toString(), map: ms.generateMap() };
 }
-
-/**
- * Looks up the sentry.{@param platform}.config.(ts|js) file
- * @returns the file path to the file or undefined if it doesn't exist
- */
-export function getUserConfigFile(projectDir: string, platform: 'server' | 'client'): string | undefined {
-  const possibilities = [`sentry.${platform}.config.ts`, `sentry.${platform}.config.js`];
-
-  for (const filename of possibilities) {
-    if (fs.existsSync(path.resolve(projectDir, filename))) {
-      return filename;
-    }
-  }
-
-  return undefined;
-}

packages/sveltekit/src/config/vitePlugins.ts renamed to packages/sveltekit/src/vite/injectInitPlugin.ts

@@ -0,0 +1,54 @@
+import type { Plugin, UserConfig } from 'vite';
+
+import { injectSentryInitPlugin } from './injectInitPlugin';
+import { hasSentryInitFiles } from './utils';
+
+/**
+ * Vite Plugin for the Sentry SvelteKit SDK, taking care of:
+ *
+ * - Creating Sentry releases and uploading source maps to Sentry
+ * - Injecting Sentry.init calls if you use dedicated `sentry.(client|server).config.ts` files
+ *
+ * This plugin adds a few additional properties to your Vite config.
+ * Make sure, it is registered before the SvelteKit plugin.
+ */
+export function sentrySvelteKitPlugin(): Plugin {
+  return {
+    name: 'sentry-sveltekit',
+    enforce: 'pre', // we want this plugin to run early enough
+    config: originalConfig => {
+      return addSentryConfig(originalConfig);
+    },
+  };
+}
+
+function addSentryConfig(originalConfig: UserConfig): UserConfig {
+  const sentryPlugins = [];
+
+  const shouldAddInjectInitPlugin = hasSentryInitFiles();
+
+  if (shouldAddInjectInitPlugin) {
+    sentryPlugins.push(injectSentryInitPlugin);
+  }
+
+  const config = {
+    ...originalConfig,
+    plugins: originalConfig.plugins ? [...sentryPlugins, ...originalConfig.plugins] : [...sentryPlugins],
+  };
+
+  const mergedDevServerFileSystemConfig: UserConfig['server'] = shouldAddInjectInitPlugin
+    ? {
+        fs: {
+          ...(config.server && config.server.fs),
+          allow: [...((config.server && config.server.fs && config.server.fs.allow) || []), '.'],
+        },
+      }
+    : {};
+
+  config.server = {
+    ...config.server,
+    ...mergedDevServerFileSystemConfig,
+  };
+
+  return config;
+}

packages/sveltekit/src/vite/sentrySvelteKitPlugin.ts

@@ -0,0 +1,28 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+/**
+ * Checks if the user has a Sentry init file in the root of their project.
+ * @returns true if the user has a Sentry init file, false otherwise.
+ */
+export function hasSentryInitFiles(): boolean {
+  const hasSentryServerInit = !!getUserConfigFile(process.cwd(), 'server');
+  const hasSentryClientInit = !!getUserConfigFile(process.cwd(), 'client');
+  return hasSentryServerInit || hasSentryClientInit;
+}
+
+/**
+ * Looks up the sentry.{@param platform}.config.(ts|js) file
+ * @returns the file path to the file or undefined if it doesn't exist
+ */
+export function getUserConfigFile(projectDir: string, platform: 'server' | 'client'): string | undefined {
+  const possibilities = [`sentry.${platform}.config.ts`, `sentry.${platform}.config.js`];
+
+  for (const filename of possibilities) {
+    if (fs.existsSync(path.resolve(projectDir, filename))) {
+      return filename;
+    }
+  }
+
+  return undefined;
+}

packages/sveltekit/src/vite/utils.ts

@@ -1,6 +1,7 @@
 import type { UserConfig, UserConfigExport } from 'vite';
 
-import { getUserConfigFile, injectSentryInitPlugin } from './vitePlugins';
+import { injectSentryInitPlugin } from './injectInitPlugin';
+import { hasSentryInitFiles } from './utils';
 
 /**
  * This function adds Sentry-specific configuration to your Vite config.
@@ -60,9 +61,3 @@ function addSentryConfig(originalConfig: UserConfig): UserConfig {
 
   return config;
 }
-
-function hasSentryInitFiles(): boolean {
-  const hasSentryServerInit = !!getUserConfigFile(process.cwd(), 'server');
-  const hasSentryClientInit = !!getUserConfigFile(process.cwd(), 'client');
-  return hasSentryServerInit || hasSentryClientInit;
-}

packages/sveltekit/src/config/withSentryViteConfig.ts renamed to packages/sveltekit/src/vite/withSentryViteConfig.ts

@@ -1,7 +1,7 @@
 import type * as fs from 'fs';
 import { vi } from 'vitest';
 
-import { injectSentryInitPlugin } from '../../src/config/vitePlugins';
+import { injectSentryInitPlugin } from '../../src/vite/injectInitPlugin';
 
 vi.mock('fs', async () => {
   const original = await vi.importActual<typeof fs>('fs');

packages/sveltekit/test/config/vitePlugins.test.ts renamed to packages/sveltekit/test/vite/injectInitPlugin.test.ts

@@ -0,0 +1,108 @@
+import { vi } from 'vitest';
+
+import { sentrySvelteKitPlugin } from './../../src/vite/sentrySvelteKitPlugin';
+import * as utils from './../../src/vite/utils';
+
+describe('sentrySvelteKitPlugin', () => {
+  it('returns a Vite plugin with name, enforce, and config hook', () => {
+    const plugin = sentrySvelteKitPlugin();
+    expect(plugin).toHaveProperty('name');
+    expect(plugin).toHaveProperty('enforce');
+    expect(plugin).toHaveProperty('config');
+    expect(plugin.name).toEqual('sentry-sveltekit');
+    expect(plugin.enforce).toEqual('pre');
+  });
+
+  describe('config hook', () => {
+    const hasSentryInitFilesSpy = vi.spyOn(utils, 'hasSentryInitFiles').mockReturnValue(true);
+
+    beforeEach(() => {
+      hasSentryInitFilesSpy.mockClear();
+    });
+
+    it('adds the injectInitPlugin and adjusts the dev server config if init config files exist', () => {
+      const plugin = sentrySvelteKitPlugin();
+      const originalConfig = {};
+
+      // @ts-ignore - plugin.config exists and is callable
+      const modifiedConfig = plugin.config(originalConfig);
+
+      expect(modifiedConfig).toEqual({
+        plugins: [
+          {
+            enforce: 'pre',
+            name: 'sentry-init-injection-plugin',
+            transform: expect.any(Function),
+          },
+        ],
+        server: {
+          fs: {
+            allow: ['.'],
+          },
+        },
+      });
+      expect(hasSentryInitFilesSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('merges user-defined options with Sentry-specifc ones', () => {
+      const plugin = sentrySvelteKitPlugin();
+      const originalConfig = {
+        test: {
+          include: ['src/**/*.{test,spec}.{js,ts}'],
+        },
+        build: {
+          sourcemap: 'css',
+        },
+        plugins: [{ name: 'some plugin' }],
+        server: {
+          fs: {
+            allow: ['./build/**/*.{js}'],
+          },
+        },
+      };
+
+      // @ts-ignore - plugin.config exists and is callable
+      const modifiedConfig = plugin.config(originalConfig);
+
+      expect(modifiedConfig).toEqual({
+        test: {
+          include: ['src/**/*.{test,spec}.{js,ts}'],
+        },
+        build: {
+          sourcemap: 'css',
+        },
+        plugins: [
+          {
+            enforce: 'pre',
+            name: 'sentry-init-injection-plugin',
+            transform: expect.any(Function),
+          },
+          { name: 'some plugin' },
+        ],
+        server: {
+          fs: {
+            allow: ['./build/**/*.{js}', '.'],
+          },
+        },
+      });
+      expect(hasSentryInitFilesSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it("doesn't add the injectInitPlugin if init config files don't exist", () => {
+      hasSentryInitFilesSpy.mockReturnValue(false);
+      const plugin = sentrySvelteKitPlugin();
+      const originalConfig = {
+        plugins: [{ name: 'some plugin' }],
+      };
+
+      // @ts-ignore - plugin.config exists and is callable
+      const modifiedConfig = plugin.config(originalConfig);
+
+      expect(modifiedConfig).toEqual({
+        plugins: [{ name: 'some plugin' }],
+        server: {},
+      });
+      expect(hasSentryInitFilesSpy).toHaveBeenCalledTimes(1);
+    });
+  });
+});

packages/sveltekit/test/vite/sentrySvelteKitPlugin.test.ts

@@ -2,7 +2,7 @@ import type fs from 'fs';
 import type { Plugin, UserConfig } from 'vite';
 import { vi } from 'vitest';
 
-import { withSentryViteConfig } from '../../src/config/withSentryViteConfig';
+import { withSentryViteConfig } from '../../src/vite/withSentryViteConfig';
 
 let existsFile = true;
 vi.mock('fs', async () => {