chore: fix build/watch script for bundles and vite-powered packages (#20055)

packages/html-reporter/bundle.js

@@ -32,7 +32,9 @@ export function bundle() {
         if (!ctx || !ctx.bundle)
           return html;
         html = html.replace(/(?=<!--)([\s\S]*?)-->/, '');
-        for (const [, value] of Object.entries(ctx.bundle)) {
+        for (const [name, value] of Object.entries(ctx.bundle)) {
+          if (name.endsWith('.map'))
+            continue;
           if (value.code)
             html = html.replace(/<script type="module".*<\/script>/, () => `<script type="module">${value.code}</script>`);
           else

packages/html-reporter/vite.config.ts

@@ -37,9 +37,9 @@ export default defineConfig({
     chunkSizeWarningLimit: 100000000,
     cssCodeSplit: false,
     rollupOptions: {
-      inlineDynamicImports: true,
       output: {
         manualChunks: undefined,
+        inlineDynamicImports: true,
       },
     },
   },

packages/playwright-core/bundles/utils/package.json

@@ -4,8 +4,8 @@
   "private": true,
   "scripts": {
     "esbuild": "node build.js",
-    "build": "npm ci && npm run esbuild -- --minify",
+    "build": "npm run esbuild -- --minify",
-    "watch": "npm ci && npm run esbuild -- --watch --sourcemap",
+    "watch": "npm run esbuild -- --watch --sourcemap",
     "generate-license": "node ../../../../utils/generate_third_party_notice.js"
   },
   "dependencies": {

packages/playwright-core/bundles/zip/package.json

@@ -4,8 +4,8 @@
   "private": true,
   "scripts": {
     "esbuild": "node build.js",
-    "build": "npm ci && npm run esbuild -- --minify",
+    "build": "npm run esbuild -- --minify",
-    "watch": "npm ci && npm run esbuild -- --watch --sourcemap",
+    "watch": "npm run esbuild -- --watch --sourcemap",
     "generate-license": "node ../../../../utils/generate_third_party_notice.js"
   },
   "dependencies": {

packages/playwright-test/bundles/babel/package.json

@@ -4,8 +4,8 @@
   "private": true,
   "scripts": {
     "esbuild": "esbuild ./src/babelBundleImpl.ts --bundle --outdir=../../lib --format=cjs --platform=node --target=ES2019",
-    "build": "npm ci && npm run esbuild -- --minify",
+    "build": "npm run esbuild -- --minify",
-    "watch": "npm ci && npm run esbuild -- --watch --sourcemap",
+    "watch": "npm run esbuild -- --watch --sourcemap",
     "generate-license": "node ../../../../utils/generate_third_party_notice.js"
   },
   "dependencies": {

packages/playwright-test/bundles/expect/package.json

@@ -4,8 +4,8 @@
   "private": true,
   "scripts": {
     "esbuild": "esbuild ./src/expectBundleImpl.ts --bundle --outdir=../../lib --format=cjs --platform=node --target=ES2019",
-    "build": "npm ci && npm run esbuild -- --minify",
+    "build": "npm run esbuild -- --minify",
-    "watch": "npm ci && npm run esbuild -- --watch --sourcemap",
+    "watch": "npm run esbuild -- --watch --sourcemap",
     "generate-license": "node ../../../../utils/generate_third_party_notice.js"
   },
   "dependencies": {

packages/playwright-test/bundles/utils/package.json

@@ -4,8 +4,8 @@
   "private": true,
   "scripts": {
     "esbuild": "node build.js",
-    "build": "npm ci && npm run esbuild -- --minify",
+    "build": "npm run esbuild -- --minify",
-    "watch": "npm ci && npm run esbuild -- --watch --sourcemap",
+    "watch": "npm run esbuild -- --watch --sourcemap",
     "generate-license": "node ../../../../utils/generate_third_party_notice.js"
   },
   "dependencies": {

utils/build/build.js

@@ -43,7 +43,6 @@ const { workspace } = require('../workspace');
 
 /**
  * @typedef {{
- *   committed: boolean,
  *   inputs: string[],
  *   mustExist?: string[],
  *   script?: string,
@@ -162,8 +161,6 @@ async function runBuild() {
   for (const step of steps)
     runStep(step);
   for (const onChange of onChanges) {
-    if (onChange.committed)
-      continue;
     if (onChange.script)
       runStep({ command: 'node', args: [filePath(onChange.script)], shell: false });
     else
@@ -182,6 +179,15 @@ function copyFile(file, from, to) {
   fs.copyFileSync(file, destination);
 }
 
+const bundles = [];
+for (const pkg of workspace.packages()) {
+  const bundlesDir = path.join(pkg.path, 'bundles');
+  if (!fs.existsSync(bundlesDir))
+    continue;
+  for (const bundle of fs.readdirSync(bundlesDir))
+    bundles.push(path.join(bundlesDir, bundle));
+}
+
 // Update test runner.
 steps.push({
   command: 'npm',
@@ -190,6 +196,23 @@ steps.push({
   cwd: path.join(__dirname, '..', '..', 'tests', 'playwright-test', 'stable-test-runner'),
 });
 
+// Update bundles.
+for (const bundle of bundles) {
+  steps.push({
+    command: 'npm',
+    args: ['ci', '--save=false', '--fund=false', '--audit=false'],
+    shell: true,
+    cwd: bundle,
+  });
+}
+
+// Generate third party licenses for bundles.
+steps.push({
+  command: 'node',
+  args: [path.resolve(__dirname, '../generate_third_party_notice.js')],
+  shell: true,
+});
+
 // Build injected scripts.
 steps.push({
   command: 'node',
@@ -197,7 +220,7 @@ steps.push({
   shell: true,
 });
 
-// Run Babel & Bundles.
+// Run Babel.
 for (const pkg of workspace.packages()) {
   if (!fs.existsSync(path.join(pkg.path, 'src')))
     continue;
@@ -212,31 +235,38 @@ for (const pkg of workspace.packages()) {
       quotePath(path.join(pkg.path, 'src'))],
     shell: true,
   });
-
-  // Build bundles.
-  const bundlesDir = path.join(pkg.path, 'bundles');
-  if (!fs.existsSync(bundlesDir))
-    continue;
-  for (const bundle of fs.readdirSync(bundlesDir)) {
-    steps.push({
-      command: 'npm',
-      args: ['run', 'build'],
-      shell: true,
-      cwd: path.join(bundlesDir, bundle)
-    });
-  }
 }
 
-// Generate third party licenses for bundles.
+// Build/watch bundles.
+for (const bundle of bundles) {
+  steps.push({
+    command: 'npm',
+    args: ['run', watchMode ? 'watch' : 'build'],
+    shell: true,
+    cwd: bundle,
+  });
+}
+
+// Build/watch web packages.
+for (const webPackage of ['html-reporter', 'recorder', 'trace-viewer']) {
+  steps.push({
+    command: 'npx',
+    args: ['vite', 'build', ...(watchMode ? ['--watch', '--sourcemap'] : [])],
+    shell: true,
+    cwd: path.join(__dirname, '..', '..', 'packages', webPackage),
+  });
+}
+// Build/watch trace viewer service worker.
 steps.push({
-  command: 'node',
+  command: 'npx',
-  args: [path.resolve(__dirname, '../generate_third_party_notice.js')],
+  args: ['vite', '--config', 'vite.sw.config.ts', 'build', ...(watchMode ? ['--watch', '--sourcemap'] : [])],
   shell: true,
+  cwd: path.join(__dirname, '..', '..', 'packages', 'trace-viewer'),
 });
 
+
 // Generate injected.
 onChanges.push({
-  committed: false,
   inputs: [
     'packages/playwright-core/src/server/injected/**',
     'packages/playwright-core/src/server/isomorphic/**',
@@ -247,7 +277,6 @@ onChanges.push({
 
 // Generate channels.
 onChanges.push({
-  committed: false,
   inputs: [
     'packages/protocol/src/protocol.yml'
   ],
@@ -256,7 +285,6 @@ onChanges.push({
 
 // Generate types.
 onChanges.push({
-  committed: false,
   inputs: [
     'docs/src/api/',
     'docs/src/test-api/',
@@ -274,38 +302,6 @@ onChanges.push({
   script: 'utils/generate_types/index.js',
 });
 
-// Rebuild web projects on change.
-for (const webPackage of ['html-reporter', 'recorder', 'trace-viewer']) {
-  onChanges.push({
-    committed: false,
-    inputs: [
-      `packages/${webPackage}/index.html`,
-      `packages/${webPackage}/pubic/`,
-      `packages/${webPackage}/src/`,
-      `packages/${webPackage}/view.config.ts`,
-      `packages/web/src/`,
-    ],
-    command: 'npx',
-    args: ['vite', 'build', ...(watchMode ? ['--sourcemap'] : [])],
-    cwd: path.join(__dirname, '..', '..', 'packages', webPackage),
-  });
-}
-
-// Rebuild web projects service workers on change.
-for (const webPackage of ['trace-viewer']) {
-  onChanges.push({
-    committed: false,
-    inputs: [
-      `packages/${webPackage}/src/`,
-      `packages/${webPackage}/view.sw.config.ts`,
-      `packages/web/src/`,
-    ],
-    command: 'npx',
-    args: ['vite', '--config', 'vite.sw.config.ts', 'build', ...(watchMode ? ['--sourcemap'] : [])],
-    cwd: path.join(__dirname, '..', '..', 'packages', webPackage),
-  });
-}
-
 // The recorder and trace viewer have an app_icon.png that needs to be copied.
 copyFiles.push({
   files: 'packages/playwright-core/src/server/chromium/*.png',
@@ -322,13 +318,6 @@ copyFiles.push({
   ignored: ['**/.eslintrc.js', '**/webpack*.config.js', '**/injected/**/*']
 });
 
-copyFiles.push({
-  files: 'packages/playwright-test/src/**/*.sh',
-  from: 'packages/playwright-test/src',
-  to: 'packages/playwright-test/lib',
-  ignored: ['**/.eslintrc.js']
-});
-
 // Sometimes we require JSON files that babel ignores.
 // For example, deviceDescriptorsSource.json
 copyFiles.push({

utils/workspace.js

@@ -173,11 +173,6 @@ const workspace = new Workspace(ROOT_PATH, [
     path: path.join(ROOT_PATH, 'packages', 'playwright-chromium'),
     files: LICENCE_FILES,
   }),
-  new PWPackage({
-    name: 'html-reporter',
-    path: path.join(ROOT_PATH, 'packages', 'html-reporter'),
-    files: [],
-  }),
   new PWPackage({
     name: '@playwright/experimental-ct-react',
     path: path.join(ROOT_PATH, 'packages', 'playwright-ct-react'),