chore: update to vite 4 (#19690)

package.json

@@ -66,7 +66,7 @@
     "@types/xml2js": "^0.4.9",
     "@typescript-eslint/eslint-plugin": "^5.10.2",
     "@typescript-eslint/parser": "^5.10.2",
-    "@vitejs/plugin-react": "^1.3.2",
+    "@vitejs/plugin-react": "^3.0.0",
     "@zip.js/zip.js": "^2.4.2",
     "ansi-to-html": "^0.7.2",
     "chokidar": "^3.5.3",
@@ -95,7 +95,7 @@
     "socksv5": "0.0.6",
     "ssim.js": "^3.5.0",
     "typescript": "^4.9.3",
-    "vite": "^3.2.1",
+    "vite": "^4.0.3",
     "ws": "^8.5.0",
     "xml2js": "^0.4.23",
     "yaml": "^1.10.2"

packages/playwright-ct-react/index.js

@@ -23,7 +23,7 @@ _addRunnerPlugin(() => {
   const { createPlugin } = require('@playwright/test/lib/plugins/vitePlugin');
   return createPlugin(
     path.join(__dirname, 'registerSource.mjs'),
-    () => require('@vitejs/plugin-react')());
+    () => import('@vitejs/plugin-react').then(plugin => plugin.default()));
 });
 
 const test = baseTest.extend(fixtures);

packages/playwright-ct-react/package.json

@@ -26,8 +26,8 @@
     }
   },
   "dependencies": {
-    "@vitejs/plugin-react": "^2.2.0",
+    "@vitejs/plugin-react": "^3.0.0",
     "@playwright/test": "1.30.0-next",
-    "vite": "^3.2.1"
+    "vite": "^4.0.3"
   }
 }

packages/playwright-ct-solid/index.js

@@ -23,7 +23,7 @@ _addRunnerPlugin(() => {
   const { createPlugin } = require('@playwright/test/lib/plugins/vitePlugin');
   return createPlugin(
     path.join(__dirname, 'registerSource.mjs'),
-    () => require('vite-plugin-solid')());
+    () => import('vite-plugin-solid').then(plugin => plugin.default()));
 });
 
 const test = baseTest.extend(fixtures);

packages/playwright-ct-solid/package.json

@@ -26,8 +26,8 @@
     }
   },
   "dependencies": {
-    "vite": "^3.2.1",
-    "vite-plugin-solid": "^2.3.10",
+    "vite": "^4.0.3",
+    "vite-plugin-solid": "^2.5.0",
     "@playwright/test": "1.30.0-next"
   },
   "devDependencies": {

packages/playwright-ct-svelte/index.js

@@ -23,7 +23,7 @@ _addRunnerPlugin(() => {
   const { createPlugin } = require('@playwright/test/lib/plugins/vitePlugin');
   return createPlugin(
     path.join(__dirname, 'registerSource.mjs'),
-    () => require('@sveltejs/vite-plugin-svelte').svelte());
+    () => import('@sveltejs/vite-plugin-svelte').then(plugin => plugin.svelte()));
 });
 
 const test = baseTest.extend(fixtures);

packages/playwright-ct-svelte/package.json

@@ -27,8 +27,8 @@
   },
   "dependencies": {
     "@playwright/test": "1.30.0-next",
-    "@sveltejs/vite-plugin-svelte": "^1.1.0",
-    "vite": "^3.2.1"
+    "@sveltejs/vite-plugin-svelte": "^2.0.2",
+    "vite": "^4.0.3"
   },
   "devDependencies": {
     "svelte": "^3.49.0"

packages/playwright-ct-vue/index.js

@@ -23,7 +23,7 @@ _addRunnerPlugin(() => {
   const { createPlugin } = require('@playwright/test/lib/plugins/vitePlugin');
   return createPlugin(
     path.join(__dirname, 'registerSource.mjs'),
-    () => require('@vitejs/plugin-vue')());
+    () => import('@vitejs/plugin-vue').then(plugin => plugin.default()));
 });
 
 const test = baseTest.extend(fixtures);

packages/playwright-ct-vue/package.json

@@ -26,8 +26,8 @@
     }
   },
   "dependencies": {
-    "@vitejs/plugin-vue": "^3.2.0",
+    "@vitejs/plugin-vue": "^4.0.0",
     "@playwright/test": "1.30.0-next",
-    "vite": "^3.2.1"
+    "vite": "^4.0.3"
   }
 }

packages/playwright-ct-vue2/index.js

@@ -23,7 +23,7 @@ _addRunnerPlugin(() => {
   const { createPlugin } = require('@playwright/test/lib/plugins/vitePlugin');
   return createPlugin(
     path.join(__dirname, 'registerSource.mjs'),
-    () => require('@vitejs/plugin-vue2')());
+    () => import('@vitejs/plugin-vue2').then(plugin => plugin.default()));
 });
 
 const test = baseTest.extend(fixtures);

packages/playwright-ct-vue2/package.json

@@ -27,8 +27,8 @@
   },
   "dependencies": {
     "@playwright/test": "1.30.0-next",
-    "@vitejs/plugin-vue2": "^2.0.0",
-    "vite": "^3.2.1"
+    "@vitejs/plugin-vue2": "^2.2.0",
+    "vite": "^4.0.3"
   },
   "devDependencies": {
     "vue": "^2.7.13"

packages/playwright-test/src/plugins/vitePlugin.ts

@@ -44,7 +44,7 @@ const compiledReactRE = /(const|var)\s+React\s*=/;
 
 export function createPlugin(
   registerSourceFile: string,
-  frameworkPluginFactory: () => Plugin): TestRunnerPlugin {
+  frameworkPluginFactory: () => Promise<Plugin>): TestRunnerPlugin {
   let configDir: string;
   return {
     name: 'playwright-vite-plugin',
@@ -117,7 +117,7 @@ export function createPlugin(
       const { build, preview } = require('vite');
       // Build config unconditionally, either build or build & preview will use it.
       viteConfig.plugins = viteConfig.plugins || [
-        frameworkPluginFactory()
+        await frameworkPluginFactory()
       ];
       // But only add out own plugin when we actually build / transform.
       if (sourcesDirty)

tests/components/ct-react-vite/package.json

@@ -16,12 +16,12 @@
   "devDependencies": {
     "@types/react": "^17.0.33",
     "@types/react-dom": "^17.0.10",
-    "@vitejs/plugin-react": "^2.2.0",
+    "@vitejs/plugin-react": "^3.0.0",
     "typescript": "^4.5.4",
-    "vite": "^3.2.1"
+    "vite": "^4.0.3"
   },
   "@standaloneDevDependencies": {
     "@playwright/experimental-ct-react": "^1.22.2",
     "@playwright/test": "^1.22.2"
   }
-}
+}

tests/components/ct-solid/package.json

@@ -12,8 +12,8 @@
   "license": "MIT",
   "devDependencies": {
     "typescript": "^4.7.4",
-    "vite": "^3.2.1",
-    "vite-plugin-solid": "^2.3.10"
+    "vite": "^4.0.3",
+    "vite-plugin-solid": "^2.5.0"
   },
   "dependencies": {
     "solid-js": "^1.4.7"

tests/components/ct-svelte-vite/package.json

@@ -10,13 +10,13 @@
     "typecheck": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^1.1.0",
+    "@sveltejs/vite-plugin-svelte": "^2.0.2",
     "@tsconfig/svelte": "^3.0.0",
     "svelte-check": "^2.2.7",
     "svelte-preprocess": "^4.9.8",
     "tslib": "^2.3.1",
     "typescript": "^4.5.4",
-    "vite": "^3.2.1"
+    "vite": "^4.0.3"
   },
   "@standaloneDevDependencies": {
     "@playwright/experimental-ct-svelte": "^1.22.2",

tests/components/ct-vue-vite/package.json

@@ -12,9 +12,9 @@
     "vue-router": "^4.1.5"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^3.2.0",
+    "@vitejs/plugin-vue": "^4.0.0",
     "@vue/tsconfig": "^0.1.3",
-    "vite": "^3.2.1",
+    "vite": "^4.0.3",
     "vue-tsc": "^1.0.0"
   },
   "@standaloneDevDependencies": {