@cypress/vite-dev-server 2.2.2 → 2.2.3

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [@cypress/vite-dev-server-v2.2.3](https://github.com/cypress-io/cypress/compare/@cypress/vite-dev-server-v2.2.2...@cypress/vite-dev-server-v2.2.3) (2022-05-10)
+
+
+### Bug Fixes
+
+* handle specs with white space in vite-dev-server ([#21386](https://github.com/cypress-io/cypress/issues/21386)) ([f1c3a9b](https://github.com/cypress-io/cypress/commit/f1c3a9b3186057dd63645fd9e617f343db5c473b))
+
 # [@cypress/vite-dev-server-v2.2.2](https://github.com/cypress-io/cypress/compare/@cypress/vite-dev-server-v2.2.1...@cypress/vite-dev-server-v2.2.2) (2021-12-16)
 
 

package/README.md

@@ -56,8 +56,8 @@ Install `@cypress/vue` or `@cypress/react` to get this package working properly
 - The HTML page calls a script that loads support file and the specs using a native `import()` function
 - Then triggers the loaded tests
 
-Vite is reponsible for compiling and bundling all the files. We use its error overlay to display any transpiling error.
-Omly runtime errors have to be handled through cypress
+Vite is responsible for compiling and bundling all the files. We use its error overlay to display any transpiling error.
+Only runtime errors have to be handled through cypress
 
 ## Changelog
 

package/client/initCypressTests.js

@@ -1,15 +1,15 @@
 // This file is merged in a <script type=module> into index.html
 // it will be used to load and kick start the selected spec
-
-const supportPath = import.meta.env.__cypress_supportPath
-const originAutUrl = import.meta.env.__cypress_originAutUrl
+import specLoaders from 'cypress:spec-loaders'
+import { hasSupportPath, originAutUrl } from 'cypress:config'
 
 const specPath = window.location.pathname.replace(originAutUrl, '')
 
-const importsToLoad = [() => import(/* @vite-ignore */ specPath)]
+const specLoader = specLoaders[specPath]
+const importsToLoad = [specLoader || (() => import(/* @vite-ignore */ specPath))]
 
-if (supportPath) {
-  importsToLoad.unshift(() => import(/* @vite-ignore */ supportPath))
+if (hasSupportPath) {
+  importsToLoad.unshift(() => import('cypress:support-path'))
 }
 
 const CypressInstance = window.Cypress = parent.Cypress
@@ -46,3 +46,4 @@ CypressInstance.on('test:before:run', () => {
 
 // Make usage of node test plugins possible
 window.global = window
+window.process = typeof process !== 'undefined' ? process : {}

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 import { InlineConfig } from 'vite';
-import { StartDevServerOptions } from './startServer';
+import { StartDevServerOptions } from './resolveServerConfig';
 export { StartDevServerOptions };
 export declare function startDevServer(startDevServerArgs: StartDevServerOptions): Promise<Cypress.ResolvedDevServerConfig>;
 export declare type CypressViteDevServerConfig = Omit<InlineConfig, 'base' | 'root'>;

package/dist/index.js

@@ -2,14 +2,21 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.defineDevServerConfig = exports.devServer = exports.startDevServer = void 0;
 const debug_1 = require("debug");
-const startServer_1 = require("./startServer");
+const vite_1 = require("vite");
+const resolveServerConfig_1 = require("./resolveServerConfig");
 const debug = (0, debug_1.debug)('cypress:vite-dev-server:vite');
 async function startDevServer(startDevServerArgs) {
-    const viteDevServer = await (0, startServer_1.start)(startDevServerArgs);
-    const app = await viteDevServer.listen();
-    const port = app.config.server.port;
+    if (!startDevServerArgs.viteConfig) {
+        debug('User did not pass in any Vite dev server configuration');
+        startDevServerArgs.viteConfig = {};
+    }
+    debug('starting vite dev server');
+    const resolvedConfig = await (0, resolveServerConfig_1.resolveServerConfig)(startDevServerArgs);
+    const port = resolvedConfig.server.port;
+    const viteDevServer = await (0, vite_1.createServer)(resolvedConfig);
+    await viteDevServer.listen();
     debug('Component testing vite server started on port', port);
-    return { port, close: app.httpServer.close };
+    return { port, close: viteDevServer.close };
 }
 exports.startDevServer = startDevServer;
 function devServer(cypressDevServerConfig, devServerConfig) {

package/dist/makeCypressPlugin.js

@@ -5,11 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeCypressPlugin = void 0;
 const path_1 = require("path");
-const fs_1 = require("fs");
-const util_1 = require("util");
+const promises_1 = require("fs/promises");
 const debug_1 = __importDefault(require("debug"));
+const vite_1 = require("vite");
 const debug = (0, debug_1.default)('cypress:vite-dev-server:plugin');
-const read = (0, util_1.promisify)(fs_1.readFile);
 const pluginName = 'cypress-transform-html';
 const OSSepRE = new RegExp(`\\${path_1.sep}`, 'g');
 function convertPathToPosix(path) {
@@ -29,38 +28,48 @@ const makeCypressPlugin = (projectRoot, supportFilePath, devServerEvents, specs)
         specsPathsSet = getSpecsPathsSet(specs);
     });
     const posixSupportFilePath = supportFilePath ? convertPathToPosix((0, path_1.resolve)(projectRoot, supportFilePath)) : undefined;
-    const normalizedSupportFilePath = posixSupportFilePath ? `${base}@fs/${posixSupportFilePath}` : undefined;
     return {
         name: pluginName,
         enforce: 'pre',
-        config(_, env) {
-            if (env) {
-                return {
-                    define: {
-                        'import.meta.env.__cypress_supportPath': JSON.stringify(normalizedSupportFilePath),
-                        'import.meta.env.__cypress_originAutUrl': JSON.stringify(`__cypress/iframes/${convertPathToPosix(projectRoot)}/`),
-                    },
-                };
-            }
-        },
         configResolved(config) {
             base = config.base;
         },
-        transformIndexHtml() {
-            debug('transformIndexHtml with base', base);
-            return [
-                // load the script at the end of the body
-                // script has to be loaded when the vite client is connected
-                {
-                    tag: 'script',
-                    injectTo: 'body',
-                    attrs: { type: 'module' },
-                    children: `import(${JSON.stringify(`${base}@fs/${INIT_FILEPATH}`)})`,
-                },
-            ];
+        async transformIndexHtml() {
+            const indexHtmlPath = (0, path_1.resolve)(__dirname, '..', 'index.html');
+            const indexHtmlContent = await (0, promises_1.readFile)(indexHtmlPath, { encoding: 'utf8' });
+            // find </body> last index
+            const endOfBody = indexHtmlContent.lastIndexOf('</body>');
+            // insert the script in the end of the body
+            return `${indexHtmlContent.substring(0, endOfBody)}<script src="${base}cypress:client-init-test" type="module"></script>${indexHtmlContent.substring(endOfBody)}`;
+        },
+        resolveId(id) {
+            if (id === 'cypress:config') {
+                return id;
+            }
+            if (id === 'cypress:support-path') {
+                return posixSupportFilePath;
+            }
+            if (id === 'cypress:spec-loaders') {
+                return id;
+            }
+            if (id === '/cypress:client-init-test') {
+                return INIT_FILEPATH;
+            }
+        },
+        load(id) {
+            if (id === 'cypress:spec-loaders') {
+                return `export default {\n${specs.map((s) => {
+                    return `${JSON.stringify(encodeURI(s.relative))}:()=>import(${JSON.stringify(s.absolute)})`;
+                }).join(',\n')}\n}`;
+            }
+            if (id === 'cypress:config') {
+                return `
+export const hasSupportPath = ${JSON.stringify(!!supportFilePath)}
+export const originAutUrl = ${JSON.stringify(`/__cypress/iframes/${(0, vite_1.normalizePath)(projectRoot)}/`)}`;
+            }
         },
         configureServer: async (server) => {
-            const indexHtml = await read((0, path_1.resolve)(__dirname, '..', 'index.html'), { encoding: 'utf8' });
+            const indexHtml = await (0, promises_1.readFile)((0, path_1.resolve)(__dirname, '..', 'index.html'), { encoding: 'utf8' });
             const transformedIndexHtml = await server.transformIndexHtml(base, indexHtml);
             server.middlewares.use(`${base}index.html`, (req, res) => res.end(transformedIndexHtml));
         },

package/dist/{startServer.d.ts → resolveServerConfig.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-import { ViteDevServer, InlineConfig } from 'vite';
+import type { InlineConfig } from 'vite';
 export interface StartDevServerOptions {
     /**
      * the Cypress dev server configuration object
@@ -13,4 +13,4 @@ export interface StartDevServerOptions {
      */
     viteConfig?: Omit<InlineConfig, 'base' | 'root'>;
 }
-export declare function start(devServerOptions: StartDevServerOptions): Promise<ViteDevServer>;
+export declare const resolveServerConfig: ({ viteConfig, options }: StartDevServerOptions) => Promise<InlineConfig>;

package/dist/{startServer.js → resolveServerConfig.js}

@@ -3,9 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.start = void 0;
+exports.resolveServerConfig = void 0;
 const debug_1 = __importDefault(require("debug"));
-const vite_1 = require("vite");
 const path_1 = require("path");
 const get_port_1 = __importDefault(require("get-port"));
 const makeCypressPlugin_1 = require("./makeCypressPlugin");
@@ -54,13 +53,4 @@ const resolveServerConfig = async ({ viteConfig, options }) => {
     debug(`the resolved server config is ${JSON.stringify(finalConfig, null, 2)}`);
     return finalConfig;
 };
-async function start(devServerOptions) {
-    if (!devServerOptions.viteConfig) {
-        debug('User did not pass in any Vite dev server configuration');
-        devServerOptions.viteConfig = {};
-    }
-    debug('starting vite dev server');
-    const resolvedConfig = await resolveServerConfig(devServerOptions);
-    return (0, vite_1.createServer)(resolvedConfig);
-}
-exports.start = start;
+exports.resolveServerConfig = resolveServerConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cypress/vite-dev-server",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "Launches Vite Dev Server for Component Testing",
   "main": "index.js",
   "scripts": {