chore: HMR for Trace Viewer build script changes (#33291)

packages/trace-viewer/.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+public/sw.bundle.js

packages/trace-viewer/vite.config.ts

@@ -26,6 +26,9 @@ export default defineConfig({
     react(),
     bundle()
   ],
+  define: {
+    'process.env': {},
+  },
   resolve: {
     alias: {
       '@injected': path.resolve(__dirname, '../playwright-core/src/server/injected'),
@@ -38,8 +41,6 @@ export default defineConfig({
   },
   build: {
     outDir: path.resolve(__dirname, '../playwright-core/lib/vite/traceViewer'),
-    // Output dir is shared with vite.sw.config.ts, clearing it here is racy.
-    emptyOutDir: false,
     rollupOptions: {
       input: {
         index: path.resolve(__dirname, 'index.html'),

packages/trace-viewer/vite.sw.config.ts

@@ -35,9 +35,10 @@ export default defineConfig({
       '@web': path.resolve(__dirname, '../web/src'),
     },
   },
+  publicDir: false,
   build: {
-    outDir: path.resolve(__dirname, '../playwright-core/lib/vite/traceViewer'),
-    // Output dir is shared with vite.config.ts, clearing it here is racy.
+    // outputs into the public dir, where the build of vite.config.ts will pick it up
+    outDir: path.resolve(__dirname, 'public'),
     emptyOutDir: false,
     rollupOptions: {
       input: {

utils/build/build.js

@@ -275,6 +275,22 @@ for (const bundle of bundles) {
   });
 }
 
+// Build/watch trace viewer service worker.
+steps.push({
+  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: watchMode, // feeds into trace-viewer's `public` directory, so it needs to be finished before trace-viewer build starts
+});
+
 // Build/watch web packages.
 for (const webPackage of ['html-reporter', 'recorder', 'trace-viewer']) {
   steps.push({
@@ -290,22 +306,17 @@ for (const webPackage of ['html-reporter', 'recorder', 'trace-viewer']) {
     concurrent: true,
   });
 }
-// Build/watch trace viewer service worker.
-steps.push({
-  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,
-});
 
+// web packages dev server
+if (watchMode) {
+  steps.push({
+    command: 'npx',
+    args: ['vite', '--port', '44223', '--base', '/trace/'],
+    shell: true,
+    cwd: path.join(__dirname, '..', '..', 'packages', 'trace-viewer'),
+    concurrent: true,
+  });
+}
 
 // Generate injected.
 onChanges.push({