fix(vite-plugin-angular): use esbuild to postprocess sourcemaps durin…

…g testing (#1399)
analogjs · Oct 12, 2024 · bdf8cee · bdf8cee
1 parent 7afc9bd
commit bdf8cee
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 3 deletions.
diff --git a/packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts b/packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts
@@ -31,7 +31,7 @@ import {
   createJitResourceTransformer,
   SourceFileCache,
 } from './utils/devkit.js';
-import { angularVitestPlugin } from './angular-vitest-plugin.js';
+import { angularVitestPlugins } from './angular-vitest-plugin.js';
 import { angularStorybookPlugin } from './angular-storybook-plugin.js';
 
 const require = createRequire(import.meta.url);
@@ -409,7 +409,7 @@ export function angular(options?: PluginOptions): Plugin[] {
 
   return [
     angularPlugin(),
-    (isTest && !isStackBlitz && angularVitestPlugin()) as Plugin,
+    ...(isTest && !isStackBlitz ? angularVitestPlugins() : []),
     (jit &&
       jitPlugin({
         inlineStylesExtension: pluginOptions.inlineStylesExtension,

diff --git a/packages/vite-plugin-angular/src/lib/angular-vitest-plugin.ts b/packages/vite-plugin-angular/src/lib/angular-vitest-plugin.ts
@@ -1,4 +1,4 @@
-import { Plugin, transformWithEsbuild } from 'vite';
+import { Plugin, transformWithEsbuild, UserConfig } from 'vite';
 
 export function angularVitestPlugin(): Plugin {
   return {
@@ -46,3 +46,47 @@ export function angularVitestPlugin(): Plugin {
     },
   };
 }
+
+/**
+ * This eagerly disables esbuild so Vitest
+ * disables it when its internal plugin
+ * is configured.
+ */
+export function angularVitestEsbuildPlugin(): Plugin {
+  return {
+    name: '@analogjs/vitest-angular-esbuild-plugin',
+    enforce: 'pre',
+    config(userConfig: UserConfig) {
+      return {
+        esbuild: userConfig.esbuild ?? false,
+      };
+    },
+  };
+}
+
+/**
+ * This plugin does post-processing with esbuild
+ * instead of preprocessing to re-align
+ * the sourcemaps so breakpoints and coverage reports
+ * work correctly.
+ */
+export function angularVitestSourcemapPlugin(): Plugin {
+  return {
+    name: '@analogjs/vitest-angular-sourcemap-plugin',
+    async transform(code: string, id: string) {
+      const result = await transformWithEsbuild(code, id, {
+        loader: 'js',
+      });
+
+      return result;
+    },
+  };
+}
+
+export function angularVitestPlugins() {
+  return [
+    angularVitestPlugin(),
+    angularVitestEsbuildPlugin(),
+    angularVitestSourcemapPlugin(),
+  ];
+}