chore: address deprecated Vite warnings (#31618)

package.json

@@ -30,7 +30,7 @@
     "ct": "playwright test tests/components/test-all.spec.js --reporter=list",
     "test": "playwright test --config=tests/library/playwright.config.ts",
     "eslint": "eslint --cache --report-unused-disable-directives --ext ts,tsx,js,jsx,mjs .",
-    "tsc": "tsc -p .",
+    "tsc": "tsc -p . && tsc -p packages/html-reporter/",
     "build-installer": "babel -s --extensions \".ts\" --out-dir packages/playwright-core/lib/utils/ packages/playwright-core/src/utils",
     "doc": "node utils/doclint/cli.js",
     "lint": "npm run eslint && npm run tsc && npm run doc && npm run check-deps && node utils/generate_channels.js && node utils/generate_types/ && npm run lint-tests && npm run test-types && npm run lint-packages",

packages/html-reporter/bundle.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import fs, { existsSync } from 'fs';
+import fs from 'fs';
 import path from 'path';
 import type { Plugin, UserConfig } from 'vite';
 
@@ -26,7 +26,7 @@ export function bundle(): Plugin {
       config = c;
     },
     transformIndexHtml: {
-      transform(html, ctx) {
+      handler(html, ctx) {
         if (!ctx || !ctx.bundle)
           return html;
         html = html.replace(/(?=<!--)([\s\S]*?)-->/, '');
@@ -42,7 +42,7 @@ export function bundle(): Plugin {
       },
     },
     closeBundle: () => {
-      if (existsSync(path.join(config.build!.outDir!, 'index.html'))) {
+      if (fs.existsSync(path.join(config.build!.outDir!, 'index.html'))) {
         const targetDir = path.join(__dirname, '..', 'playwright-core', 'lib', 'vite', 'htmlReport');
         fs.mkdirSync(targetDir, { recursive: true });
         fs.copyFileSync(

packages/html-reporter/package.json

@@ -2,6 +2,7 @@
   "name": "html-reporter",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build && tsc",

packages/html-reporter/playwright.config.ts

@@ -16,6 +16,7 @@
 
 import { devices, defineConfig } from '@playwright/experimental-ct-react';
 import path from 'path';
+import url from 'url';
 
 export default defineConfig({
   testDir: 'src',
@@ -28,7 +29,7 @@ export default defineConfig({
     ctViteConfig: {
       resolve: {
         alias: {
-          '@web': path.resolve(__dirname, '../web/src'),
+          '@web': path.resolve(path.dirname(url.fileURLToPath(import.meta.url)), '../web/src'),
         },
       }
     },

packages/html-reporter/tsconfig.node.json

@@ -2,7 +2,9 @@
   "compilerOptions": {
     "composite": true,
     "module": "esnext",
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["playwright.config.ts", "vite.config.ts", "bundle.ts"]
 }

packages/recorder/package.json

@@ -2,6 +2,7 @@
   "name": "recorder",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build && tsc",

packages/trace-viewer/bundle.ts

@@ -14,23 +14,18 @@
  * limitations under the License.
  */
 
-/**
- * @returns {import('vite').Plugin}
- */
-export function bundle() {
-  let config;
+import type { Plugin } from 'vite';
+
+export function bundle(): Plugin {
   return {
     name: 'playwright-bundle',
-    config(c) {
-      config = c;
-    },
     transformIndexHtml: {
-      transform(html, ctx) {
+      handler(html, ctx) {
         if (!ctx || !ctx.bundle)
           return html;
         // Workaround vite issue that we cannot exclude some scripts from preprocessing.
         return html.replace(/(?=<!--)([\s\S]*?)-->/, '').replace('<!-- <script src="stall.js"></script> -->', '<script src="stall.js"></script>');
       },
     },
-  }
+  };
 }

packages/trace-viewer/package.json

@@ -2,6 +2,7 @@
   "name": "trace-viewer",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build && tsc",

packages/trace-viewer/tsconfig.node.json

@@ -2,7 +2,9 @@
   "compilerOptions": {
     "composite": true,
     "module": "esnext",
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "vite.sw.config.ts", "bundle.ts"]
 }

packages/trace-viewer/vite.config.ts

@@ -16,9 +16,8 @@
 
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-// @ts-ignore
 import { bundle } from './bundle';
-import * as path from 'path';
+import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({

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

@@ -16,9 +16,8 @@
 
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-// @ts-ignore
 import { bundle } from './bundle';
-import * as path from 'path';
+import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({

tsconfig.json

@@ -24,7 +24,7 @@
     "esModuleInterop": true,
     "strict": true,
     "allowJs": false,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "resolveJsonModule": true,
     "noEmit": true,
     "noImplicitOverride": true,
@@ -35,5 +35,6 @@
   "include": ["packages"],
   "exclude": [
     "packages/*/lib",
-  ],
+    "packages/html-reporter/",
+  ]
 }