From f7a388dcb4f0b2bb66a18b3359c619468804d1e0 Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Fri, 8 Nov 2024 15:08:58 +0100
Subject: [PATCH] chore: HMR for Trace Viewer build script changes (#33291)

---
 packages/trace-viewer/.gitignore        |  2 ++
 packages/trace-viewer/vite.config.ts    |  5 +--
 packages/trace-viewer/vite.sw.config.ts |  5 +--
 utils/build/build.js                    | 41 ++++++++++++++++---------
 4 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/packages/trace-viewer/.gitignore b/packages/trace-viewer/.gitignore
index a547bf36d8..9c0fa8b116 100644
--- a/packages/trace-viewer/.gitignore
+++ b/packages/trace-viewer/.gitignore
@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+public/sw.bundle.js
diff --git a/packages/trace-viewer/vite.config.ts b/packages/trace-viewer/vite.config.ts
index 0e2e9cb642..470d2ac51f 100644
--- a/packages/trace-viewer/vite.config.ts
+++ b/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'),
diff --git a/packages/trace-viewer/vite.sw.config.ts b/packages/trace-viewer/vite.sw.config.ts
index dc621448b9..60e90b96ac 100644
--- a/packages/trace-viewer/vite.sw.config.ts
+++ b/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: {
diff --git a/utils/build/build.js b/utils/build/build.js
index 7a289bd5ed..908c219737 100644
--- a/utils/build/build.js
+++ b/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({