@cypress/vite-dev-server 5.0.6 → 5.1.0

package/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)

package/client/initCypressTests.js

@@ -13,6 +13,14 @@ 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, '')
 
@@ -20,15 +28,22 @@ if (supportFile) {
     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,
   })
 }
 
@@ -36,7 +51,7 @@ if (supportFile) {
 // 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.

package/dist/devServer.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="cypress" />
-/// <reference types="cypress" />
 /// <reference types="node" />
-import type { UserConfig } from 'vite';
+import type { UserConfig } from 'vite-5';
 declare const ALL_FRAMEWORKS: readonly ["react", "vue"];
 declare type ConfigHandler = UserConfig | (() => UserConfig | Promise<UserConfig>);
 export declare type ViteDevServerConfig = {
@@ -15,6 +14,6 @@ export declare type ViteDevServerConfig = {
 };
 export declare function devServer(config: ViteDevServerConfig): Promise<Cypress.ResolvedDevServerConfig>;
 export declare namespace devServer {
-    var create: (devServerConfig: ViteDevServerConfig, vite: typeof import("vite")) => Promise<import("vite").ViteDevServer>;
+    var create: (devServerConfig: ViteDevServerConfig, vite: typeof import("vite-5")) => Promise<import("vite-5").ViteDevServer>;
 }
 export {};

package/dist/devServer.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.devServer = void 0;
 const tslib_1 = require("tslib");
 const debug_1 = tslib_1.__importDefault(require("debug"));
+const major_1 = tslib_1.__importDefault(require("semver/functions/major"));
 const getVite_1 = require("./getVite");
 const resolveConfig_1 = require("./resolveConfig");
 const debug = (0, debug_1.default)('cypress:vite-dev-server:devServer');
@@ -10,6 +11,14 @@ const ALL_FRAMEWORKS = ['react', 'vue'];
 async function devServer(config) {
     // This has to be the first thing we do as we need to source vite from their project's dependencies
     const vite = (0, getVite_1.getVite)(config);
+    let majorVersion = undefined;
+    if (vite.version) {
+        majorVersion = (0, major_1.default)(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);
     debug('Vite server created');

package/dist/getVite.d.ts

@@ -1,3 +1,3 @@
 import type { ViteDevServerConfig } from './devServer';
-export declare type Vite = typeof import('vite');
+export declare type Vite = typeof import('vite-5');
 export declare function getVite(config: ViteDevServerConfig): Vite;

package/dist/plugins/cypress.d.ts

@@ -1,4 +1,4 @@
-import type { Plugin } from 'vite';
+import type { PluginOption } from 'vite-5';
 import type { Vite } from '../getVite';
 import type { ViteDevServerConfig } from '../devServer';
-export declare const Cypress: (options: ViteDevServerConfig, vite: Vite) => Plugin;
+export declare const Cypress: (options: ViteDevServerConfig, vite: Vite) => PluginOption;

package/dist/plugins/cypress.js

@@ -33,7 +33,7 @@ const Cypress = (options, vite) => {
             base = config.base;
         },
         async transformIndexHtml(html) {
-            // it's possibe other plugins have modified the HTML
+            // it's possible other plugins have modified the HTML
             // before we get to. For example vitejs/plugin-react will
             // add a preamble. We do our best to look at the HTML we
             // receive and inject it.

package/dist/plugins/sourcemap.d.ts

@@ -1,4 +1,4 @@
-import type { Plugin } from 'vite';
+import type { PluginOption } from 'vite-5';
 import type { Vite } from '../getVite';
 import type { ViteDevServerConfig } from '../devServer';
-export declare const CypressSourcemap: (options: ViteDevServerConfig, vite: Vite) => Plugin;
+export declare const CypressSourcemap: (options: ViteDevServerConfig, vite: Vite) => PluginOption;

package/dist/resolveConfig.d.ts

@@ -1,4 +1,4 @@
-import type { InlineConfig } from 'vite';
+import type { InlineConfig } from 'vite-5';
 import type { ViteDevServerConfig } from './devServer';
 import type { Vite } from './getVite';
 export declare const createViteDevServerConfig: (config: ViteDevServerConfig, vite: Vite) => Promise<InlineConfig>;

package/package.json

@@ -1,19 +1,18 @@
 {
   "name": "@cypress/vite-dev-server",
-  "version": "5.0.6",
+  "version": "5.1.0",
   "description": "Launches Vite Dev Server for Component Testing",
   "main": "index.js",
   "scripts": {
     "build": "tsc || echo 'built, with type errors'",
-    "build-prod": "tsc || echo 'built, with type errors'",
     "check-ts": "tsc --noEmit",
+    "cypress:open": "yarn cypress:run-cypress-in-cypress gulp open --project .",
     "cypress:run": "yarn cypress:run-cypress-in-cypress node ../../scripts/cypress run --project . --browser chrome",
     "cypress:run-cypress-in-cypress": "cross-env CYPRESS_INTERNAL_E2E_TESTING_SELF_PARENT_PROJECT=1 HTTP_PROXY_TARGET_FOR_ORIGIN_REQUESTS=http://localhost:4455 CYPRESS_REMOTE_DEBUGGING_PORT=6666 TZ=America/New_York",
-    "cypress:open": "yarn cypress:run-cypress-in-cypress gulp open --project .",
-    "watch": "tsc -w",
+    "lint": "eslint --ext .js,.ts,.json, .",
     "test": "yarn test-unit",
     "test-unit": "mocha -r ts-node/register/transpile-only --config ./test/.mocharc.js",
-    "lint": "eslint --ext .js,.ts,.json, ."
+    "watch": "tsc -w"
   },
   "dependencies": {
     "debug": "^4.3.4",
@@ -23,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.1",
-    "vite": "4.3.2",
-    "vite-plugin-inspect": "0.7.24"
+    "ts-node": "^10.9.2",
+    "vite-4": "npm:vite@^4.5.2",
+    "vite-5": "npm:vite@^5.2.8",
+    "vite-plugin-inspect": "0.8.4"
   },
   "files": [
     "dist",
@@ -46,5 +47,14 @@
   "module": "dist/index.js",
   "publishConfig": {
     "access": "public"
+  },
+  "nx": {
+    "targets": {
+      "build": {
+        "outputs": [
+          "{projectRoot}/dist"
+        ]
+      }
+    }
   }
 }