feat: support vite v5 (#29518)

* feat: support vite v5 [run ci]

* make sure to use correct path in windows if no cypress public path is provided [run ci]

* update snapshot [run ci]

* update docs on devServerPublicPathRoute for vite-dev-server

* update comments

* refactor resolveConfig test

---------

Co-authored-by: Jennifer Shehane <jennifer@cypress.io>

.circleci/workflows.yml

@@ -30,7 +30,8 @@ mainBuildFilters: &mainBuildFilters
         - /^release\/\d+\.\d+\.\d+$/
         # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
         - 'update-v8-snapshot-cache-on-develop'
-        - chore/fix_kitchen_sink
+        - 'publish-binary'
+        - 'feat/vite_5_support'
 
 # usually we don't build Mac app - it takes a long time
 # but sometimes we want to really confirm we are doing the right thing
@@ -41,7 +42,7 @@ macWorkflowFilters: &darwin-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'bump-electron-27.3.10', << pipeline.git.branch >> ]
+    - equal: [ 'feat/vite_5_support', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -52,7 +53,7 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'bump-electron-27.3.10', << pipeline.git.branch >> ]
+    - equal: [ 'feat/vite_5_support', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -75,7 +76,7 @@ windowsWorkflowFilters: &windows-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'chore/update_internal_browser_images', << pipeline.git.branch >> ]
+    - equal: [ 'feat/vite_5_support', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -151,7 +152,7 @@ commands:
           name: Set environment variable to determine whether or not to persist artifacts
           command: |
             echo "Setting SHOULD_PERSIST_ARTIFACTS variable"
-            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "bump-electron-27.3.10" ]]; then
+            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "feat/vite_5_support" ]]; then
                 export SHOULD_PERSIST_ARTIFACTS=true
             fi' >> "$BASH_ENV"
   # You must run `setup_should_persist_artifacts` command and be using bash before running this command

cli/CHANGELOG.md

@@ -1,8 +1,12 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
-## 13.9.1
+## 13.10.0
 
 _Released 5/21/2024 (PENDING)_
 
+**Features:**
+
+- Added support for `vite` `v5` to `@cypress/vite-dev-server`. Addresses [#28347](https://github.com/cypress-io/cypress/issues/28347).
+
 **Bugfixes:**
 
 - Fixed an issue where orphaned Electron processes were inadvertently terminating the browser's CRI client. Fixes [#28397](https://github.com/cypress-io/cypress/issues/28397). Fixed in [#29515](https://github.com/cypress-io/cypress/pull/29515).

npm/vite-dev-server/README.md

@@ -56,10 +56,25 @@ We then merge the sourced config with the user's vite config, and layer on our o
 | <= v2                    | <= v9   |
 | >= v3                    | >= v10  |
 
+#### `devServerPublicPathRoute` for Vite v5
+
+If using Vite version 5, setting `devServerPublicPathRoute` may be needed if directly referencing public path url assets in components under test. This is due to Cypress using its own public path, `/__cypress/src`, when running component tests. This can be configured within the `component` namespace below if you wish you set your public path to be the same as your app:
+
+```ts
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  component: {
+    // If wanting a publicPath the same as the default in Vite 5
+    devServerPublicPathRoute: ''
+  }
+})
+```
+
 ## License
 
 [![license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/cypress-io/cypress/blob/develop/LICENSE)
 
 This project is licensed under the terms of the [MIT license](/LICENSE).
 
-## [Changelog](./CHANGELOG.md)
+## [Changelog](./CHANGELOG.md)

npm/vite-dev-server/client/initCypressTests.js

@@ -13,30 +13,45 @@ const supportFile = CypressInstance.config('supportFile')
 const projectRoot = CypressInstance.config('projectRoot')
 const devServerPublicPathRoute = CypressInstance.config('devServerPublicPathRoute')
 
+let devServerPublicPathBase = devServerPublicPathRoute
+
+// In the case the devServerPublicPathRoute is set to the root, make sure we configure the loaders correctly to load relative paths
+// This can be a case in vite 5 if a user wishes to have the same public path as their app (which is quite common)
+if (devServerPublicPathRoute === '') {
+  devServerPublicPathBase = '.'
+}
+
 if (supportFile) {
   let supportRelativeToProjectRoot = supportFile.replace(projectRoot, '')
 
   if (CypressInstance.config('platform') === 'win32') {
     const platformProjectRoot = projectRoot.replaceAll('/', '\\')
 
     supportRelativeToProjectRoot = supportFile.replace(platformProjectRoot, '')
+
+    // Support relative path (as well as in some cases absolute path) lookup is done with unix style operators.
+    supportRelativeToProjectRoot = supportRelativeToProjectRoot.replaceAll('\\', '/')
   }
 
-  // We need a slash before /cypress/supportFile.js, this happens by default
-  // with the current string replacement logic.
+  // We need a slash before /cypress/supportFile.js if the devServerPublicPathRoute is populated, this happens by default
+  // with the current string replacement logic. Otherwise, we need to specify the relative path to look up if devServerPublicPathRoute
+  // is not defined as it would be in the base directory
+
+  const relativeUrl = `${devServerPublicPathBase}${supportRelativeToProjectRoot}`
+
   importsToLoad.push({
-    load: () => import(`${devServerPublicPathRoute}${supportRelativeToProjectRoot}`),
+    load: () => import(relativeUrl),
     absolute: supportFile,
     relative: supportRelativeToProjectRoot,
-    relativeUrl: `${devServerPublicPathRoute}${supportRelativeToProjectRoot}`,
+    relativeUrl,
   })
 }
 
 // Using relative path wouldn't allow to load tests outside Vite project root folder
 // So we use the "@fs" bit to load the test file using its absolute path
 // Normalize path to not include a leading slash (different on Win32 vs Unix)
 const normalizedAbsolutePath = CypressInstance.spec.absolute.replace(/^\//, '')
-const testFileAbsolutePathRoute = `${devServerPublicPathRoute}/@fs/${normalizedAbsolutePath}`
+const testFileAbsolutePathRoute = `${devServerPublicPathBase}/@fs/${normalizedAbsolutePath}`
 
 /* Spec file import logic */
 // We need a slash before /src/my-spec.js, this does not happen by default.

npm/vite-dev-server/package.json

@@ -22,12 +22,14 @@
   },
   "devDependencies": {
     "chai": "^4.3.6",
+    "decache": "^4.6.2",
     "dedent": "^0.7.0",
     "mocha": "^9.2.2",
     "sinon": "^13.0.1",
     "ts-node": "^10.9.2",
-    "vite": "4.5.2",
-    "vite-plugin-inspect": "0.7.24"
+    "vite-4": "npm:vite@^4.5.2",
+    "vite-5": "npm:vite@^5.2.8",
+    "vite-plugin-inspect": "0.8.4"
   },
   "files": [
     "dist",

npm/vite-dev-server/src/devServer.ts

@@ -1,5 +1,6 @@
 import debugFn from 'debug'
-import type { UserConfig } from 'vite'
+import semverMajor from 'semver/functions/major'
+import type { UserConfig } from 'vite-5'
 import { getVite, Vite } from './getVite'
 import { createViteDevServerConfig } from './resolveConfig'
 
@@ -8,7 +9,6 @@ const debug = debugFn('cypress:vite-dev-server:devServer')
 const ALL_FRAMEWORKS = ['react', 'vue'] as const
 
 type ConfigHandler = UserConfig | (() => UserConfig | Promise<UserConfig>)
-
 export type ViteDevServerConfig = {
   specs: Cypress.Spec[]
   cypressConfig: Cypress.PluginConfigOptions
@@ -23,6 +23,15 @@ export async function devServer (config: ViteDevServerConfig): Promise<Cypress.R
   // This has to be the first thing we do as we need to source vite from their project's dependencies
   const vite = getVite(config)
 
+  let majorVersion: number | undefined = undefined
+
+  if (vite.version) {
+    majorVersion = semverMajor(vite.version)
+    debug(`Found vite version v${majorVersion}`)
+  } else {
+    debug(`vite version not found`)
+  }
+
   debug('Creating Vite Server')
   const server = await devServer.create(config, vite)
 

npm/vite-dev-server/src/getVite.ts

@@ -3,7 +3,7 @@ import type { ViteDevServerConfig } from './devServer'
 
 const debug = debugFn('cypress:vite-dev-server:getVite')
 
-export type Vite = typeof import('vite')
+export type Vite = typeof import('vite-5')
 
 // "vite-dev-server" is bundled in the binary, so we need to require.resolve "vite"
 // from root of the active project since we don't bundle vite internally but rather

npm/vite-dev-server/src/plugins/cypress.ts

@@ -1,5 +1,5 @@
 import debugFn from 'debug'
-import type { ModuleNode, Plugin, ViteDevServer } from 'vite'
+import type { ModuleNode, PluginOption, ViteDevServer } from 'vite-5'
 import type { Vite } from '../getVite'
 import { parse, HTMLElement } from 'node-html-parser'
 import fs from 'fs'
@@ -27,7 +27,7 @@ function getSpecsPathsSet (specs: Spec[]) {
 export const Cypress = (
   options: ViteDevServerConfig,
   vite: Vite,
-): Plugin => {
+): PluginOption => {
   let base = '/'
 
   const projectRoot = options.cypressConfig.projectRoot

npm/vite-dev-server/src/plugins/sourcemap.ts

@@ -1,5 +1,5 @@
 import debugFn from 'debug'
-import type { Plugin } from 'vite'
+import type { PluginOption } from 'vite-5'
 import type { Vite } from '../getVite'
 
 import type { ViteDevServerConfig } from '../devServer'
@@ -9,7 +9,7 @@ const debug = debugFn('cypress:vite-dev-server:plugins:sourcemap')
 export const CypressSourcemap = (
   options: ViteDevServerConfig,
   vite: Vite,
-): Plugin => {
+): PluginOption => {
   return {
     name: 'cypress:sourcemap',
     enforce: 'post',

npm/vite-dev-server/src/resolveConfig.ts

@@ -4,7 +4,7 @@
  * You can find it here https://github.com/vitest-dev/vitest/blob/main/packages/vitest/src/node/create.ts
  */
 import debugFn from 'debug'
-import type { InlineConfig } from 'vite'
+import type { InlineConfig } from 'vite-5'
 import path from 'path'
 import semverGte from 'semver/functions/gte'
 
@@ -62,7 +62,7 @@ export const createViteDevServerConfig = async (config: ViteDevServerConfig, vit
   return finalConfig
 }
 
-function makeCypressViteConfig (config: ViteDevServerConfig, vite: Vite): InlineConfig {
+function makeCypressViteConfig (config: ViteDevServerConfig, vite: Vite): InlineConfig | InlineConfig {
   const {
     cypressConfig: {
       port,