@cypress/vite-dev-server 2.2.0 → 2.2.3

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [@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)
+
+
+### Bug Fixes
+
+* check the port is avail on all local hosts ([#19402](https://github.com/cypress-io/cypress/issues/19402)) ([4826175](https://github.com/cypress-io/cypress/commit/4826175040bfc024a36df47dc0c74f2871fa944f))
+
+# [@cypress/vite-dev-server-v2.2.1](https://github.com/cypress-io/cypress/compare/@cypress/vite-dev-server-v2.2.0...@cypress/vite-dev-server-v2.2.1) (2021-11-19)
+
+
+### Bug Fixes
+
+* compile npm packages for node 12 ([#18989](https://github.com/cypress-io/cypress/issues/18989)) ([30b3eb2](https://github.com/cypress-io/cypress/commit/30b3eb2376bc1ed69087ba96f60448687e8489e6))
+
 # [@cypress/vite-dev-server-v2.2.0](https://github.com/cypress-io/cypress/compare/@cypress/vite-dev-server-v2.1.1...@cypress/vite-dev-server-v2.2.0) (2021-10-15)
 
 

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 debug = debug_1.debug('cypress:vite-dev-server:vite');
+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 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 debug = debug_1.default('cypress:vite-dev-server:plugin');
-const read = util_1.promisify(fs_1.readFile);
+const vite_1 = require("vite");
+const debug = (0, debug_1.default)('cypress:vite-dev-server:plugin');
 const pluginName = 'cypress-transform-html';
 const OSSepRE = new RegExp(`\\${path_1.sep}`, 'g');
 function convertPathToPosix(path) {
@@ -17,7 +16,7 @@ function convertPathToPosix(path) {
         ? path
         : path.replace(OSSepRE, '/');
 }
-const INIT_FILEPATH = path_1.resolve(__dirname, '../client/initCypressTests.js');
+const INIT_FILEPATH = (0, path_1.resolve)(__dirname, '../client/initCypressTests.js');
 const HMR_DEPENDENCY_LOOKUP_MAX_ITERATION = 50;
 function getSpecsPathsSet(specs) {
     return new Set(specs.map((spec) => spec.absolute));
@@ -28,39 +27,49 @@ const makeCypressPlugin = (projectRoot, supportFilePath, devServerEvents, specs)
     devServerEvents.on('dev-server:specs:changed', (specs) => {
         specsPathsSet = getSpecsPathsSet(specs);
     });
-    const posixSupportFilePath = supportFilePath ? convertPathToPosix(path_1.resolve(projectRoot, supportFilePath)) : undefined;
-    const normalizedSupportFilePath = posixSupportFilePath ? `${base}@fs/${posixSupportFilePath}` : undefined;
+    const posixSupportFilePath = supportFilePath ? convertPathToPosix((0, path_1.resolve)(projectRoot, supportFilePath)) : 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(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));
         },
@@ -71,7 +80,7 @@ const makeCypressPlugin = (projectRoot, supportFilePath, devServerEvents, specs)
             let iterationNumber = 0;
             const exploredFiles = new Set();
             // until we reached a point where the current module is imported by no other
-            while (moduleImporters?.size) {
+            while (moduleImporters === null || moduleImporters === void 0 ? void 0 : moduleImporters.size) {
                 if (iterationNumber > HMR_DEPENDENCY_LOOKUP_MAX_ITERATION) {
                     debug(`max hmr iteration reached: ${HMR_DEPENDENCY_LOOKUP_MAX_ITERATION}; Rerun will not happen on this file change.`);
                     return [];

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,13 +3,12 @@ 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");
-const debug = debug_1.default('cypress:vite-dev-server:start');
+const debug = (0, debug_1.default)('cypress:vite-dev-server:start');
 const resolveServerConfig = async ({ viteConfig, options }) => {
     const { projectRoot, supportFile } = options.config;
     const requiredOptions = {
@@ -17,7 +16,7 @@ const resolveServerConfig = async ({ viteConfig, options }) => {
         root: projectRoot,
     };
     const finalConfig = { ...viteConfig, ...requiredOptions };
-    finalConfig.plugins = [...(finalConfig.plugins || []), makeCypressPlugin_1.makeCypressPlugin(projectRoot, supportFile, options.devServerEvents, options.specs)];
+    finalConfig.plugins = [...(finalConfig.plugins || []), (0, makeCypressPlugin_1.makeCypressPlugin)(projectRoot, supportFile, options.devServerEvents, options.specs)];
     // This alias is necessary to avoid a "prefixIdentifiers" issue from slots mounting
     // only cjs compiler-core accepts using prefixIdentifiers in slots which vue test utils use.
     // Could we resolve this usage in test-utils?
@@ -25,14 +24,14 @@ const resolveServerConfig = async ({ viteConfig, options }) => {
         finalConfig.resolve = finalConfig.resolve || {};
         finalConfig.resolve.alias = {
             ...finalConfig.resolve.alias,
-            '@vue/compiler-core': path_1.resolve(path_1.dirname(require.resolve('@vue/compiler-core')), 'dist', 'compiler-core.cjs.js'),
+            '@vue/compiler-core': (0, path_1.resolve)((0, path_1.dirname)(require.resolve('@vue/compiler-core')), 'dist', 'compiler-core.cjs.js'),
         };
     }
     catch (e) {
         // Vue 3 is not installed
     }
     finalConfig.server = finalConfig.server || {};
-    finalConfig.server.port = await get_port_1.default({ port: finalConfig.server.port || 3000, host: 'localhost' }),
+    finalConfig.server.port = await (0, get_port_1.default)({ port: finalConfig.server.port || 3000 }),
         // Ask vite to pre-optimize all dependencies of the specs
         finalConfig.optimizeDeps = finalConfig.optimizeDeps || {};
     // pre-optimize all the specs
@@ -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 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.0",
+  "version": "2.2.3",
   "description": "Launches Vite Dev Server for Component Testing",
   "main": "index.js",
   "scripts": {