@cypress/vite-dev-server 5.2.0 → 6.0.0

package/README.md

@@ -12,7 +12,7 @@ import { defineConfig } from 'cypress'
 export default defineConfig({
   component: {
     devServer: {
-      framework: 'create-react-app',
+      framework: 'react',
       bundler: 'vite',
       // viteConfig?: Will try to infer, if passed it will be used as is
     }
@@ -51,10 +51,11 @@ We then merge the sourced config with the user's vite config, and layer on our o
 
 ## Compatibility
 
-| @cypress/vite-dev-server | cypress |
-| ------------------------ | ------- |
-| <= v2                    | <= v9   |
-| >= v3                    | >= v10  |
+| @cypress/vite-dev-server | cypress       |
+| ------------------------ | ------------- |
+| <= v2                    | <= v9         |
+| >= v3 <= v5              | >= v10 <= v13 |
+| >= v6                    | >= v14        |
 
 #### `devServerPublicPathRoute` for Vite v5
 

package/dist/devServer.d.ts

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

package/dist/getVite.d.ts

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

package/dist/plugins/cypress.d.ts

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

package/dist/plugins/cypress.js

@@ -23,7 +23,11 @@ const Cypress = (options, vite) => {
     // TODO: use async fs methods here
     // eslint-disable-next-line no-restricted-syntax
     let loader = fs_1.default.readFileSync(INIT_FILEPATH, 'utf8');
-    devServerEvents.on('dev-server:specs:changed', (specs) => {
+    devServerEvents.on('dev-server:specs:changed', ({ specs, options }) => {
+        if (options === null || options === void 0 ? void 0 : options.neededForJustInTimeCompile) {
+            // if an option is needed for just in time compile, no-op as this isn't supported in vite
+            return;
+        }
         debug(`dev-server:secs:changed: ${specs.map((spec) => spec.relative)}`);
         specsPathsSet = getSpecsPathsSet(specs);
     });
@@ -63,12 +67,7 @@ const Cypress = (options, vite) => {
         },
         configureServer: async (server) => {
             server.middlewares.use(`${base}index.html`, async (req, res) => {
-                let transformedIndexHtml = await server.transformIndexHtml(base, '');
-                const viteImport = `<script type="module" src="${options.cypressConfig.devServerPublicPathRoute}/@vite/client"></script>`;
-                // If we're doing cy-in-cy, we need to be able to access the Cypress instance from the parent frame.
-                if (process.env.CYPRESS_INTERNAL_VITE_OPEN_MODE_TESTING) {
-                    transformedIndexHtml = transformedIndexHtml.replace(viteImport, `<script>document.domain = 'localhost';</script>${viteImport}`);
-                }
+                const transformedIndexHtml = await server.transformIndexHtml(base, '');
                 return res.end(transformedIndexHtml);
             });
         },

package/dist/plugins/sourcemap.d.ts

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

package/dist/plugins/sourcemap.js

@@ -10,26 +10,31 @@ const CypressSourcemap = (options, vite) => {
         enforce: 'post',
         transform(code, id, options) {
             try {
-                if (/\.js$/i.test(id) && !/\/\/# sourceMappingURL=/i.test(code)) {
+                // Remove query parameters from the id. This is necessary because some files
+                // have a cache buster query parameter (e.g. `?v=12345`)
+                const queryParameterLessId = id.split('?')[0];
+                // Check if the file has a JavaScript extension and does not have an inlined sourcemap
+                if (/\.(js|jsx|ts|tsx|vue|svelte|mjs|cjs)$/i.test(queryParameterLessId) && !/\/\/# sourceMappingURL=data/i.test(code)) {
                     /*
-                    The Vite dev server and plugins automatically generate sourcemaps for most files, but they are
-                    only included in the served files if any transpilation actually occurred (JSX, TS, etc). This
-                    means that files that are "pure" JS won't include sourcemaps, so JS spec files that don't require
-                    transpilation won't get code frames in the runner.
-          
-                    A sourcemap for these files is generated (just not served) which is in effect an "identity"
-                    sourcemap mapping 1-to-1 to the output file. We can grab this and pass it along as a sourcemap
-                    we want Vite to embed into the output, giving Cypress a sourcemap to use for codeFrame lookups.
-                    @see https://rollupjs.org/guide/en/#thisgetcombinedsourcemap
-          
-                    We utilize a 'post' plugin here and manually append the sourcemap content to the code. We *should*
+                    The Vite dev server and plugins automatically generate sourcemaps for most files, but there are
+                    some files that don't have sourcemaps generated for them or are not inlined. We utilize a 'post' plugin
+                    here and manually append the sourcemap content to the code in these cases. We *should*
                     be able to pass the sourcemap along using the `map` attribute in the return value, but Babel-based
                     plugins don't work with this which causes sourcemaps to break for files that go through common
                     plugins like `@vitejs/plugin-react`. By manually appending the sourcemap at this point in time
                     Babel-transformed files end up with correct sourcemaps.
                     */
                     const sourcemap = this.getCombinedSourcemap();
-                    code += `\n//# sourceMappingURL=${sourcemap.toUrl()}`;
+                    const sourcemapUrl = sourcemap.toUrl();
+                    if (/\/\/# sourceMappingURL=/i.test(code)) {
+                        // If the code already has a sourceMappingURL, it is not an inlined sourcemap
+                        // and we should replace it with the new sourcemap
+                        code = code.replace(/\/\/# sourceMappingURL=(.*)$/m, `//# sourceMappingURL=${sourcemapUrl}`);
+                    }
+                    else {
+                        // If the code does not have a sourceMappingURL, we should append the new sourcemap
+                        code += `\n//# sourceMappingURL=${sourcemapUrl}`;
+                    }
                     return {
                         code,
                         map: { mappings: '' },

package/dist/resolveConfig.d.ts

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

package/dist/resolveConfig.js

@@ -52,7 +52,7 @@ const createViteDevServerConfig = async (config, vite) => {
 exports.createViteDevServerConfig = createViteDevServerConfig;
 function makeCypressViteConfig(config, vite) {
     var _a, _b, _c;
-    const { cypressConfig: { experimentalJustInTimeCompile, port, projectRoot, devServerPublicPathRoute, supportFile, cypressBinaryRoot, isTextTerminal, }, specs, } = config;
+    const { cypressConfig: { port, projectRoot, devServerPublicPathRoute, supportFile, cypressBinaryRoot, isTextTerminal, }, specs, } = config;
     const vitePort = port !== null && port !== void 0 ? port : undefined;
     // Vite caches its output in the .vite directory in the node_modules where vite lives.
     // So we want to find that node_modules path and ensure it's added to the "allow" list
@@ -95,7 +95,7 @@ function makeCypressViteConfig(config, vite) {
                     // Supported from Vite v3 - add null check for v2 users.
                     (_a = vite.searchForWorkspaceRoot) === null || _a === void 0 ? void 0 : _a.call(vite, process.cwd()),
                 ],
-            }, port: vitePort, host: '127.0.0.1' }, (isTextTerminal && !experimentalJustInTimeCompile
+            }, port: vitePort, host: '127.0.0.1' }, (isTextTerminal
             ? { watch: { ignored: '**/*' }, hmr: false }
             : {})),
         plugins: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cypress/vite-dev-server",
-  "version": "5.2.0",
+  "version": "6.0.0",
   "description": "Launches Vite Dev Server for Component Testing",
   "main": "index.js",
   "scripts": {
@@ -29,6 +29,7 @@
     "ts-node": "^10.9.2",
     "vite-4": "npm:vite@^4.5.3",
     "vite-5": "npm:vite@^5.2.8",
+    "vite-6": "npm:vite@^6.0.0",
     "vite-plugin-inspect": "0.8.4"
   },
   "files": [