chore: fix html-reporter/trace-viewer TSC errors (#26813)

packages/html-reporter/bundle.ts

@@ -16,12 +16,10 @@
 
 import fs, { existsSync } from 'fs';
 import path from 'path';
+import type { Plugin, UserConfig } from 'vite';
 
-/**
+export function bundle(): Plugin {
- * @returns {import('vite').Plugin}
+  let config: UserConfig;
- */
-export function bundle() {
-  let config;
   return {
     name: 'playwright-bundle',
     config(c) {
@@ -32,7 +30,7 @@ export function bundle() {
         if (!ctx || !ctx.bundle)
           return html;
         html = html.replace(/(?=<!--)([\s\S]*?)-->/, '');
-        for (const [name, value] of Object.entries(ctx.bundle)) {
+        for (const [name, value] of Object.entries(ctx.bundle) as any) {
           if (name.endsWith('.map'))
             continue;
           if (value.code)
@@ -44,13 +42,13 @@ export function bundle() {
       },
     },
     closeBundle: () => {
-      if (existsSync(path.join(config.build.outDir, 'index.html'))) {
+      if (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(
-          path.join(config.build.outDir, 'index.html'),
+            path.join(config.build!.outDir!, 'index.html'),
-          path.join(targetDir, 'index.html'));
+            path.join(targetDir, 'index.html'));
       }
     },
-  }
+  };
 }

packages/html-reporter/src/headerView.spec.tsx

@@ -27,7 +27,6 @@ test('should render counters', async ({ mount }) => {
     flaky: 17,
     skipped: 10,
     ok: false,
-    duration: 100000
   }} filterText='' setFilterText={() => {}}></HeaderView>);
   await expect(component.locator('a', { hasText: 'All' }).locator('.counter')).toHaveText('100');
   await expect(component.locator('a', { hasText: 'Passed' }).locator('.counter')).toHaveText('42');
@@ -46,7 +45,6 @@ test('should toggle filters', async ({ page, mount }) => {
       flaky: 17,
       skipped: 10,
       ok: false,
-      duration: 100000
     }}
     filterText=''
     setFilterText={(filterText: string) => filters.push(filterText)}

packages/html-reporter/src/metadataView.tsx

@@ -34,16 +34,16 @@ export type Metainfo = {
 };
 
 class ErrorBoundary extends React.Component<React.PropsWithChildren<{}>, { error: Error | null, errorInfo: React.ErrorInfo | null }> {
-  state: { error: Error | null, errorInfo: React.ErrorInfo | null } = {
+  override state: { error: Error | null, errorInfo: React.ErrorInfo | null } = {
     error: null,
     errorInfo: null,
   };
 
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+  override componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
     this.setState({ error, errorInfo });
   }
 
-  render() {
+  override render() {
     if (this.state.error || this.state.errorInfo) {
       return (
         <AutoChip header={'Commit Metainfo Error'} dataTestId='metadata-error'>

packages/web/playwright/index.ts

@@ -15,6 +15,6 @@
  */
 
 import '../src/common.css';
-import '../src/theme.ts';
+import '../src/theme';
 import '../src/third_party/vscode/codicon.css';
 import '../src/third_party/vscode/colors.css';

packages/web/src/components/expandable.tsx

@@ -19,7 +19,7 @@ import './expandable.css';
 
 export const Expandable: React.FunctionComponent<React.PropsWithChildren<{
   title: JSX.Element | string,
-  setExpanded: Function,
+  setExpanded: (expanded: boolean) => void,
   expanded: boolean,
   expandOnTitleClick?: boolean,
 }>> = ({ title, children, setExpanded, expanded, expandOnTitleClick }) => {

tsconfig.json

@@ -24,7 +24,7 @@
     "esModuleInterop": true,
     "strict": true,
     "allowJs": false,
-    "jsx": "react",
+    "jsx": "preserve",
     "resolveJsonModule": true,
     "noEmit": true,
     "noImplicitOverride": true,
@@ -34,13 +34,11 @@
   "include": ["packages"],
   "exclude": [
     "packages/*/lib",
-    "packages/html-reporter",
     "packages/playwright-ct-react",
     "packages/playwright-ct-react17",
     "packages/playwright-ct-solid",
     "packages/playwright-ct-svelte",
     "packages/playwright-ct-vue",
-    "packages/playwright-ct-vue2",
+    "packages/playwright-ct-vue2"
-    "packages/web",
   ],
 }