chore: consolidate vite SW+main builds via Environment API (microsoft#41047)

Author: Skn0tt

packages/extension/vite.config.mts

@@ -19,7 +19,6 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 
-// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     react(),
@@ -37,17 +36,35 @@ export default defineConfig({
     })
   ],
   root: resolve(__dirname, 'src/ui'),
-  build: {
-    outDir: resolve(__dirname, 'dist/'),
-    emptyOutDir: false,
-    minify: false,
-    rollupOptions: {
-      input: ['src/ui/connect.html', 'src/ui/status.html'],
-      output: {
-        manualChunks: undefined,
-        entryFileNames: 'lib/ui/[name].js',
-        chunkFileNames: 'lib/ui/[name].js',
-        assetFileNames: 'lib/ui/[name].[ext]'
+  builder: {},
+  environments: {
+    client: {
+      build: {
+        outDir: resolve(__dirname, 'dist/'),
+        emptyOutDir: false,
+        minify: false,
+        rollupOptions: {
+          input: ['src/ui/connect.html', 'src/ui/status.html'],
+          output: {
+            manualChunks: undefined,
+            entryFileNames: 'lib/ui/[name].js',
+            chunkFileNames: 'lib/ui/[name].js',
+            assetFileNames: 'lib/ui/[name].[ext]'
+          }
+        }
+      }
+    },
+    sw: {
+      consumer: 'client',
+      build: {
+        outDir: resolve(__dirname, 'dist/'),
+        emptyOutDir: false,
+        minify: false,
+        lib: {
+          entry: resolve(__dirname, 'src/background.ts'),
+          fileName: 'lib/background',
+          formats: ['es']
+        }
       }
     }
   }

packages/extension/vite.sw.config.mts

@@ -42,20 +42,42 @@ export default defineConfig({
       '@web': path.resolve(__dirname, '../web/src'),
     },
   },
-  build: {
-    outDir: path.resolve(__dirname, '../playwright-core/lib/vite/traceViewer'),
-    emptyOutDir: false,
-    rollupOptions: {
-      input: {
-        index: path.resolve(__dirname, 'index.html'),
-        uiMode: path.resolve(__dirname, 'uiMode.html'),
-        snapshot: path.resolve(__dirname, 'snapshot.html'),
+  builder: {},
+  environments: {
+    client: {
+      build: {
+        outDir: path.resolve(__dirname, '../playwright-core/lib/vite/traceViewer'),
+        emptyOutDir: false,
+        rollupOptions: {
+          input: {
+            index: path.resolve(__dirname, 'index.html'),
+            uiMode: path.resolve(__dirname, 'uiMode.html'),
+            snapshot: path.resolve(__dirname, 'snapshot.html'),
+          },
+          output: {
+            entryFileNames: () => '[name].[hash].js',
+            assetFileNames: () => '[name].[hash][extname]',
+            manualChunks: undefined,
+          },
+        },
       },
-      output: {
-        entryFileNames: () => '[name].[hash].js',
-        assetFileNames: () => '[name].[hash][extname]',
-        manualChunks: undefined,
+    },
+    sw: {
+      consumer: 'client',
+      build: {
+        outDir: path.resolve(__dirname, '../playwright-core/lib/vite/traceViewer'),
+        emptyOutDir: false,
+        rollupOptions: {
+          input: {
+            sw: path.resolve(__dirname, 'src/sw-main.ts'),
+          },
+          output: {
+            entryFileNames: () => 'sw.bundle.js',
+            assetFileNames: () => 'sw.[hash][extname]',
+            manualChunks: undefined,
+          },
+        },
       },
     },
-  }
+  },
 });

packages/trace-viewer/vite.config.ts

@@ -857,29 +857,12 @@ const pkgSizePlugin = {
   },
 };
 
-// Build/watch trace viewer service worker.
-steps.push(new ProgramStep({
-  command: 'npx',
-  args: [
-    'vite',
-    '--config',
-    'vite.sw.config.ts',
-    'build',
-    ...(watchMode ? ['--watch', '--minify=false'] : []),
-    ...(withSourceMaps ? ['--sourcemap=inline'] : []),
-  ],
-  shell: true,
-  cwd: path.join(__dirname, '..', '..', 'packages', 'trace-viewer'),
-  concurrent: true,
-}));
-
 // Build/watch web packages. The html-reporter, trace-viewer, and dashboard
 // also have embedded Vite dev servers used when viewing reports/traces/the
 // dashboard live, but their bundled output is consumed as a static artifact
 // in other code paths (e.g. HtmlBuilder.build() reads lib/vite/htmlReport/
 // and lib/vite/traceViewer/), so we always keep the static build alongside
-// HMR. Recorder is not yet HMR'd. The trace viewer service worker still
-// builds via vite.sw.config.ts above — that step is not in this loop.
+// HMR. Recorder is not yet HMR'd.
 const webPackages = ['html-reporter', 'recorder', 'trace-viewer', 'dashboard'];
 for (const webPackage of webPackages) {
   steps.push(new ProgramStep({
@@ -897,24 +880,20 @@ for (const webPackage of webPackages) {
   }));
 }
 
-// Build/watch extension UI pages and service worker.
-for (const config of ['vite.config.mts', 'vite.sw.config.mts']) {
-  steps.push(new ProgramStep({
-    command: 'npx',
-    args: [
-      'vite',
-      'build',
-      '--config',
-      config,
-      ...(watchMode ? ['--watch', '--minify=false'] : []),
-      ...(withSourceMaps ? ['--sourcemap=inline'] : []),
-      '--clearScreen=false',
-    ],
-    shell: true,
-    cwd: path.join(__dirname, '..', '..', 'packages', 'extension'),
-    concurrent: true,
-  }));
-}
+// Build/watch extension
+steps.push(new ProgramStep({
+  command: 'npx',
+  args: [
+    'vite',
+    'build',
+    ...(watchMode ? ['--watch', '--minify=false'] : []),
+    ...(withSourceMaps ? ['--sourcemap=inline'] : []),
+    '--clearScreen=false',
+  ],
+  shell: true,
+  cwd: path.join(__dirname, '..', '..', 'packages', 'extension'),
+  concurrent: true,
+}));
 
 // Generate CLI help.
 onChanges.push({