chore: fix build/packaging for recorder and traceviewer (#5338)

packages/common/.npmignore

@@ -8,9 +8,13 @@
 
 # Include sources from lib, but not map files.
 !lib/**/*.js
+# Include web assets for recorder, trace viewer, etc.
+!lib/**/*.html
+!lib/**/*.png
+!lib/**/*.ttf
 # Exclude injected files. A preprocessed version of these is included via lib/generated.
 # See src/server/injected/README.md.
-lib/server/injected/
+lib/**/injected/
 # Include all binaries that we ship with the package.
 !bin/*
 # Include FFMPEG

src/server/supplements/injected/consoleApi.webpack.config.js

@@ -42,7 +42,7 @@ module.exports = {
     library: 'pwExport',
     libraryExport: 'default',
     filename: 'consoleApiSource.js',
-    path: path.resolve(__dirname, '../../../lib/server/injected/packed')
+    path: path.resolve(__dirname, '../../../../lib/server/injected/packed')
   },
   plugins: [
     new InlineSource(path.join(__dirname, '..', '..', '..', 'generated', 'consoleApiSource.ts')),

src/server/supplements/injected/recorder.webpack.config.js

@@ -42,7 +42,7 @@ module.exports = {
     library: 'pwExport',
     libraryExport: 'default',
     filename: 'recorderSource.js',
-    path: path.resolve(__dirname, '../../../lib/server/injected/packed')
+    path: path.resolve(__dirname, '../../../../lib/server/injected/packed')
   },
   plugins: [
     new InlineSource(path.join(__dirname, '..', '..', '..', 'generated', 'recorderSource.ts')),

src/server/supplements/recorder/recorderApp.ts

@@ -56,7 +56,7 @@ export class RecorderApp extends EventEmitter {
   }
 
   private async _init() {
-    const icon = await readFileAsync(require.resolve('../../../../lib/web/recorder/app_icon.png'));
+    const icon = await readFileAsync(require.resolve('../../../web/recorder/app_icon.png'));
     const crPopup = this._page._delegate as CRPage;
     await crPopup._mainFrameSession._client.send('Browser.setDockTile', {
       image: icon.toString('base64')
@@ -65,7 +65,7 @@ export class RecorderApp extends EventEmitter {
     await this._page._setServerRequestInterceptor(async route => {
       if (route.request().url().startsWith('https://playwright/')) {
         const uri = route.request().url().substring('https://playwright/'.length);
-        const file = require.resolve('../../../../lib/web/recorder/' + uri);
+        const file = require.resolve('../../../web/recorder/' + uri);
         const buffer = await readFileAsync(file);
         await route.fulfill({
           status: 200,

tsconfig.json

@@ -13,5 +13,5 @@
   },
   "compileOnSave": true,
   "include": ["src/**/*.ts", "src/**/*.js"],
-  "exclude": ["node_modules", "src/.eslintrc.js", "src/cli/traceViewer/web/**"]
+  "exclude": ["node_modules", "src/.eslintrc.js", "src/web/**", "src/**/*webpack.config.js"]
 }

utils/build/build.js

@@ -125,7 +125,7 @@ onChanges.push({
 // Copy images.
 steps.push({
   command: process.platform === 'win32' ? 'copy' : 'cp',
-  args: ['src/web/recorder/*.png'.replace(/\//g, path.sep), 'lib/web/recorder/'.replace(/\//g, path.sep)],
+  args: [filePath('src/web/recorder/*.png'), filePath('lib/web/recorder/')],
   shell: true,
 });