@cypress/vite-dev-server 2.2.1 → 3.0.0

package/CHANGELOG.md

@@ -1,3 +1,62 @@
+# [@cypress/vite-dev-server-v3.0.0](https://github.com/cypress-io/cypress/compare/@cypress/vite-dev-server-v2.2.3...@cypress/vite-dev-server-v3.0.0) (2022-06-13)
+
+
+### Bug Fixes
+
+* issue with compilation failures in component testing ([#21599](https://github.com/cypress-io/cypress/issues/21599)) ([f2bce02](https://github.com/cypress-io/cypress/commit/f2bce02f5dcab7a73a2a1b8e102518d706a29c25))
+* restart dev-server on config change ([#21212](https://github.com/cypress-io/cypress/issues/21212)) ([00a0f5a](https://github.com/cypress-io/cypress/commit/00a0f5a0e905fdfe5ef9f8ba71f915ed20ca4b72))
+* sanitize internal vite plugins ([#22055](https://github.com/cypress-io/cypress/issues/22055)) ([3b5a245](https://github.com/cypress-io/cypress/commit/3b5a245ec4aa9bf9f348fbc4bc2f0decc7c4a692))
+* supportFile path and supportFile false for vite on windows ([#21156](https://github.com/cypress-io/cypress/issues/21156)) ([dd180c8](https://github.com/cypress-io/cypress/commit/dd180c89b27546b0c96cc3f4fb4e75d983c8003e))
+* UNIFY-1774 error if component config is not sourced for webpack/vite ([#21563](https://github.com/cypress-io/cypress/issues/21563)) ([566a7b1](https://github.com/cypress-io/cypress/commit/566a7b1feb0fc1a8f1ccf83a23d8ad7a94409a6b))
+* update scaffold template to use correct path ([#20047](https://github.com/cypress-io/cypress/issues/20047)) ([6e80359](https://github.com/cypress-io/cypress/commit/6e803597a379222cf936e5977c8314d693ee1912))
+* use resolved port for vite ([#21490](https://github.com/cypress-io/cypress/issues/21490)) ([630e422](https://github.com/cypress-io/cypress/commit/630e4220ca5ebbaa8c39044b86d434510b3a0f1b))
+* wire up scaffolded indexHtml to dev servers ([#20453](https://github.com/cypress-io/cypress/issues/20453)) ([3a8797e](https://github.com/cypress-io/cypress/commit/3a8797e54db9fd0ef93a14ddc71c138ba8251e53))
+
+
+### chore
+
+* prep npm packages for use with Cypress v10 ([b924d08](https://github.com/cypress-io/cypress/commit/b924d086ee2e2ccc93303731e001b2c9e9d0af17))
+
+
+### Features
+
+* add devServer to config file ([#18962](https://github.com/cypress-io/cypress/issues/18962)) ([2573375](https://github.com/cypress-io/cypress/commit/2573375b5b6616efd2d213a94cd55fd8e0385864))
+* Add typings for new devServer config ([#18797](https://github.com/cypress-io/cypress/issues/18797)) ([e018a14](https://github.com/cypress-io/cypress/commit/e018a14c211bfcbdc4568a9a737f14f5c1686e35))
+* Deprecate run-ct / open-ct, and update all examples to use --ct instead ([#18422](https://github.com/cypress-io/cypress/issues/18422)) ([196e8f6](https://github.com/cypress-io/cypress/commit/196e8f62cc6d27974f235945cb5700624b3dae41))
+* improved DX and support for running component and e2e tests w/ gulp ([#18135](https://github.com/cypress-io/cypress/issues/18135)) ([d39b169](https://github.com/cypress-io/cypress/commit/d39b1694aac19fdcf557236ac421e2cc1c45da8b))
+* index.html configurability and storybook support ([#18242](https://github.com/cypress-io/cypress/issues/18242)) ([745b3ac](https://github.com/cypress-io/cypress/commit/745b3ac4518302983522daedf817623334feae5b))
+* merging / delegating remote queries to cloud schema ([#17875](https://github.com/cypress-io/cypress/issues/17875)) ([94541d4](https://github.com/cypress-io/cypress/commit/94541d4f18591e8fa4b8702c39e92b0a7238aa5d))
+* remove testFiles reference ([#20565](https://github.com/cypress-io/cypress/issues/20565)) ([5670344](https://github.com/cypress-io/cypress/commit/567034459089d9d53dfab5556cb9369fb335c3db))
+* Set up cypress in cypress ([#19602](https://github.com/cypress-io/cypress/issues/19602)) ([ed51bcb](https://github.com/cypress-io/cypress/commit/ed51bcbdda480f90bef557f06c297098f1897499))
+* Structuring context & schema so it can be used on the client ([#17489](https://github.com/cypress-io/cypress/issues/17489)) ([e2f395e](https://github.com/cypress-io/cypress/commit/e2f395e330f384993ed1116469102a5315a21270)), closes [#17551](https://github.com/cypress-io/cypress/issues/17551)
+* support specPattern, deprecate integrationFolder and componentFolder ([#19319](https://github.com/cypress-io/cypress/issues/19319)) ([792980a](https://github.com/cypress-io/cypress/commit/792980ac12746ef47b9c944ebe4c6c353a187ab2))
+* swap the #__cy_root id selector to become data-cy-root for component mounting ([#20951](https://github.com/cypress-io/cypress/issues/20951)) ([0e7b555](https://github.com/cypress-io/cypress/commit/0e7b555f93fb403f431c5de4a07ae7ad6ac89ba2))
+* Use .config files ([#18578](https://github.com/cypress-io/cypress/issues/18578)) ([081dd19](https://github.com/cypress-io/cypress/commit/081dd19cc6da3da229a7af9c84f62730c85a5cd6))
+* use devServer instad of startDevServer ([#20092](https://github.com/cypress-io/cypress/issues/20092)) ([8a6768f](https://github.com/cypress-io/cypress/commit/8a6768fee6f46b908c5a9daf23da8b804a6c627f))
+* Use plugins on config files ([#18798](https://github.com/cypress-io/cypress/issues/18798)) ([bb8251b](https://github.com/cypress-io/cypress/commit/bb8251b752ac44f1184f9160194cf12d41fc867f))
+* use supportFile by testingType ([#19364](https://github.com/cypress-io/cypress/issues/19364)) ([0366d4f](https://github.com/cypress-io/cypress/commit/0366d4fa8971e5e5189c6fd6450cc3c8d72dcfe1))
+* vue-cli and nuxt preset for CT object API architecture ([#20956](https://github.com/cypress-io/cypress/issues/20956)) ([57659c4](https://github.com/cypress-io/cypress/commit/57659c42468591265143aae2ff06bae4e440085f))
+* **unify:** removing prism and adding infrastructure for shiki ([#18514](https://github.com/cypress-io/cypress/issues/18514)) ([9a2e550](https://github.com/cypress-io/cypress/commit/9a2e55071d5b6dcfd97ff750b80548b834b94d30))
+
+
+### BREAKING CHANGES
+
+* new version of packages for Cypress v10
+
+# [@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)
 
 

package/README.md

@@ -1,63 +1,51 @@
 # @cypress/vite-dev-server
 
-> ⚡️ + 🌲 Cypress Component Testing w/ Vite
-
-To install vite in you component testing environment,
-1. Install it `yarn add @cypress/vite-dev-server`
-2. Add it to `cypress/plugins/index.js`
-
-```js
-import { startDevServer } from '@cypress/vite-dev-server'
-
-module.exports = (on, config) => {
-  on('dev-server:start', async (options) => startDevServer({ options }))
-
-  return config
-}
+Implements the APIs for the object-syntax of the Cypress Component-testing "vite dev server".
+
+Object syntax:
+
+```ts
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  component: {
+    devServer: {
+      framework: 'create-react-app',
+      bundler: 'vite',
+      // viteConfig?: Will try to infer, if passed it will be used as is
+    }
+  }
+})
 ```
 
-# @cypress/webpack-dev-server
-
-> **Note** this package is not meant to be used outside of cypress component testing.
-
-Install `@cypress/vue` or `@cypress/react` to get this package working properly
+Function syntax:
+
+```ts
+import { devServer } from '@cypress/vite-dev-server'
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  component: {
+    devServer(cypressConfig) {
+      return devServer({
+        cypressConfig,
+        framework: 'react',
+        viteConfig: require('./vite.config.js')
+      })
+    }
+  }
+})
+```
 
 ## Architecture
 
-### Cypress server
-
-- Every HTTP request goes to the cypress server which returns an html page. We call "TOP" because of its name in the dev tools
-    This page
-    - renders the list of spec files
-    - And the timetraveling command log
-    - Finally, it renders an AUT Iframe. this iframe calls a url that has 2 parts concatenated.
-        - a prefix: `__cypress/iframes/` 
-        - the path to the current. For example: `src/components/button.spec.tsx`
-- In the cypress server, calls prefixed with `__cypress/iframes/...` will be passed to the dev-server as `__cypress/src/index.html`
-- Every call with the prefix `__cypress/src/` will be passed to the dev-server to deal as is, without changes.
-
-### Dev-server
-
-- Responds to every query with the prefix `__cypress/src/` (base path should be this prefix).
-- Responds to `__cypress/src/index.html` with an html page. 
-    This page
-    - will contain an element `<div id="__cy_root"></div>`. Tis will be used by mount function to mount the app containing the components we want.
-    - will load support files
-    - will load the current spec from the url
-    - will start the test when both files are done loading
-- The server re-runs the tests as soon as the current spec or any dependency is updated by calling an event `devServerEvents.emit('dev-server:compile:success')`
+There should be a single publicly-exported entrypoint for the module, `devServer`, all other types and functions should be considered internal/implementation details, and types stripped from the output.
 
-## Vite dev server
+The `devServer` will first source the modules from the user's project, falling back to our own bundled versions of libraries. This ensures that the user has installed the current modules, and throws an error if the user does not have the library installed.
 
-- Takes the users `vite.config` and adds base of `__cypress/src/` and a cypress vite plugin.
-- The cypress plugin takes care of
-  - responding to the index.html query with an html page
-  - restarting the tests when files are changed
-- The HTML page calls a script that loads support file and the specs using a native `import()` function
-- Then triggers the loaded tests
+From there, we check the "framework" field to source or define any known vite transforms to aid in the compilation.
 
-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
+We then merge the sourced config with the user's vite config, and layer on our own transforms, and provide this to a vite instance. The vite instance used to create a vite-dev-server, which is returned.
 
 ## Changelog
 

package/client/initCypressTests.js

@@ -1,18 +1,35 @@
 // 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
+const CypressInstance = window.Cypress = parent.Cypress
+
+const importsToLoad = []
+
+/* Support file import logic, this should be removed once we
+ * are able to return relative paths from the supportFile
+ * Jira #UNIFY-1260
+ */
+const supportFile = CypressInstance.config('supportFile')
+const projectRoot = CypressInstance.config('projectRoot')
+const devServerPublicPathRoute = CypressInstance.config('devServerPublicPathRoute')
 
-const specPath = window.location.pathname.replace(originAutUrl, '')
+if (supportFile) {
+  let supportRelativeToProjectRoot = supportFile.replace(projectRoot, '')
 
-const importsToLoad = [() => import(/* @vite-ignore */ specPath)]
+  if (CypressInstance.config('platform') === 'win32') {
+    const platformProjectRoot = projectRoot.replaceAll('/', '\\')
 
-if (supportPath) {
-  importsToLoad.unshift(() => import(/* @vite-ignore */ supportPath))
+    supportRelativeToProjectRoot = supportFile.replace(platformProjectRoot, '')
+  }
+
+  // We need a slash before /cypress/supportFile.js, this happens by default
+  // with the current string replacement logic.
+  importsToLoad.push(() => import(`${devServerPublicPathRoute}${supportRelativeToProjectRoot}`))
 }
 
-const CypressInstance = window.Cypress = parent.Cypress
+/* Spec file import logic */
+// We need a slash before /src/my-spec.js, this does not happen by default.
+importsToLoad.push(() => import(`${devServerPublicPathRoute}/${CypressInstance.spec.relative}`))
 
 if (!CypressInstance) {
   throw new Error('Tests cannot run without a reference to Cypress!')
@@ -46,3 +63,4 @@ CypressInstance.on('test:before:run', () => {
 
 // Make usage of node test plugins possible
 window.global = window
+window.process = typeof process !== 'undefined' ? process : {}

package/dist/constants.d.ts

@@ -0,0 +1 @@
+export declare const configFiles: string[];

package/dist/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.configFiles = void 0;
+exports.configFiles = [
+    'vite.config.ts',
+    'vite.config.js',
+    'vite.config.mjs',
+    'vite.config.cjs',
+];

package/dist/devServer.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="cypress" />
+/// <reference types="node" />
+declare const ALL_FRAMEWORKS: readonly ["react", "vue"];
+export declare type ViteDevServerConfig = {
+    specs: Cypress.Spec[];
+    cypressConfig: Cypress.PluginConfigOptions;
+    devServerEvents: NodeJS.EventEmitter;
+    onConfigNotFound?: (devServer: 'vite', cwd: string, lookedIn: string[]) => void;
+} & {
+    framework?: typeof ALL_FRAMEWORKS[number];
+    viteConfig?: unknown;
+};
+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>;
+}
+export {};

package/dist/devServer.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.devServer = void 0;
+const tslib_1 = require("tslib");
+const debug_1 = (0, tslib_1.__importDefault)(require("debug"));
+const getVite_1 = require("./getVite");
+const resolveConfig_1 = require("./resolveConfig");
+const debug = (0, debug_1.default)('cypress:vite-dev-server:devServer');
+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);
+    debug('Creating Vite Server');
+    const server = await devServer.create(config, vite);
+    debug('Vite server created');
+    await server.listen();
+    const { port } = server.config.server;
+    if (!port) {
+        throw new Error('Missing vite dev server port.');
+    }
+    debug('Successfully launched the vite server on port', port);
+    return {
+        port,
+        // Close is for unit testing only. We kill this child process which will handle the closing of the server
+        close(cb) {
+            return server.close().then(() => cb === null || cb === void 0 ? void 0 : cb()).catch(cb);
+        },
+    };
+}
+exports.devServer = devServer;
+devServer.create = async function createDevServer(devServerConfig, vite) {
+    try {
+        const config = await (0, resolveConfig_1.createViteDevServerConfig)(devServerConfig, vite);
+        return await vite.createServer(config);
+    }
+    catch (err) {
+        if (err instanceof Error) {
+            throw err;
+        }
+        throw new Error(err);
+    }
+};

package/dist/getVite.d.ts

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

package/dist/getVite.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getVite = void 0;
+const tslib_1 = require("tslib");
+const debug_1 = (0, tslib_1.__importDefault)(require("debug"));
+const debug = (0, debug_1.default)('cypress:vite-dev-server:getVite');
+// "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
+// use the version the user has installed
+function getVite(config) {
+    try {
+        const viteImportPath = require.resolve('vite', { paths: [config.cypressConfig.projectRoot] });
+        debug('resolved viteImportPath as %s', viteImportPath);
+        return require(viteImportPath);
+    }
+    catch (err) {
+        throw new Error(`Could not find "vite" in your project's dependencies. Please install "vite" to fix this error.\n\n${err}`);
+    }
+}
+exports.getVite = getVite;

package/dist/index.d.ts

@@ -1,8 +1,3 @@
-/// <reference types="cypress" />
-import { InlineConfig } from 'vite';
-import { StartDevServerOptions } from './startServer';
-export { StartDevServerOptions };
-export declare function startDevServer(startDevServerArgs: StartDevServerOptions): Promise<Cypress.ResolvedDevServerConfig>;
-export declare type CypressViteDevServerConfig = Omit<InlineConfig, 'base' | 'root'>;
-export declare function devServer(cypressDevServerConfig: Cypress.DevServerConfig, devServerConfig?: CypressViteDevServerConfig): Promise<Cypress.ResolvedDevServerConfig>;
-export declare function defineDevServerConfig(devServerConfig: CypressViteDevServerConfig): CypressViteDevServerConfig;
+import { devServer } from './devServer';
+export { devServer };
+export default devServer;

package/dist/index.js

@@ -1,22 +1,6 @@
 "use strict";
 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');
-async function startDevServer(startDevServerArgs) {
-    const viteDevServer = await startServer_1.start(startDevServerArgs);
-    const app = await viteDevServer.listen();
-    const port = app.config.server.port;
-    debug('Component testing vite server started on port', port);
-    return { port, close: app.httpServer.close };
-}
-exports.startDevServer = startDevServer;
-function devServer(cypressDevServerConfig, devServerConfig) {
-    return startDevServer({ options: cypressDevServerConfig, viteConfig: devServerConfig });
-}
-exports.devServer = devServer;
-function defineDevServerConfig(devServerConfig) {
-    return devServerConfig;
-}
-exports.defineDevServerConfig = defineDevServerConfig;
+exports.devServer = void 0;
+const devServer_1 = require("./devServer");
+Object.defineProperty(exports, "devServer", { enumerable: true, get: function () { return devServer_1.devServer; } });
+exports.default = devServer_1.devServer;

package/dist/plugins/cypress.d.ts

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

package/dist/{makeCypressPlugin.js → plugins/cypress.js}

@@ -1,71 +1,66 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": 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 debug_1 = __importDefault(require("debug"));
-const debug = debug_1.default('cypress:vite-dev-server:plugin');
-const read = util_1.promisify(fs_1.readFile);
-const pluginName = 'cypress-transform-html';
-const OSSepRE = new RegExp(`\\${path_1.sep}`, 'g');
-function convertPathToPosix(path) {
-    return path_1.sep === '/'
-        ? path
-        : path.replace(OSSepRE, '/');
-}
-const INIT_FILEPATH = path_1.resolve(__dirname, '../client/initCypressTests.js');
+exports.Cypress = void 0;
+const tslib_1 = require("tslib");
+const debug_1 = (0, tslib_1.__importDefault)(require("debug"));
+const pathe_1 = require("pathe");
+const fs_1 = (0, tslib_1.__importDefault)(require("fs"));
+const path_1 = (0, tslib_1.__importDefault)(require("path"));
+const debug = (0, debug_1.default)('cypress:vite-dev-server:plugins:cypress');
+const INIT_FILEPATH = (0, pathe_1.resolve)(__dirname, '../../client/initCypressTests.js');
 const HMR_DEPENDENCY_LOOKUP_MAX_ITERATION = 50;
 function getSpecsPathsSet(specs) {
     return new Set(specs.map((spec) => spec.absolute));
 }
-const makeCypressPlugin = (projectRoot, supportFilePath, devServerEvents, specs) => {
+const Cypress = (options, vite) => {
     let base = '/';
+    const projectRoot = options.cypressConfig.projectRoot;
+    const supportFilePath = options.cypressConfig.supportFile ? path_1.default.resolve(projectRoot, options.cypressConfig.supportFile) : false;
+    const devServerEvents = options.devServerEvents;
+    const specs = options.specs;
+    const indexHtmlFile = options.cypressConfig.indexHtmlFile;
     let specsPathsSet = getSpecsPathsSet(specs);
+    let loader = fs_1.default.readFileSync(INIT_FILEPATH, 'utf8');
     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;
     return {
-        name: pluginName,
+        name: 'cypress:main',
         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, pathe_1.resolve)(projectRoot, indexHtmlFile);
+            debug('resolved the indexHtmlPath as', indexHtmlPath, 'from', indexHtmlFile);
+            const indexHtmlContent = await fs_1.default.promises.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>
+    ${loader}
+    </script>${indexHtmlContent.substring(endOfBody)}`;
         },
         configureServer: async (server) => {
-            const indexHtml = await read(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));
+            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}`);
+                }
+                return res.end(transformedIndexHtml);
+            });
         },
         handleHotUpdate: ({ server, file }) => {
             debug('handleHotUpdate - file', file);
+            // If the user provided IndexHtml is changed, do a full-reload
+            if (vite.normalizePath(file) === (0, pathe_1.resolve)(projectRoot, indexHtmlFile)) {
+                server.ws.send({
+                    type: 'full-reload',
+                });
+                return;
+            }
             // get the graph node for the file that just got updated
             let moduleImporters = server.moduleGraph.fileToModulesMap.get(file);
             let iterationNumber = 0;
@@ -83,7 +78,7 @@ const makeCypressPlugin = (projectRoot, supportFilePath, devServerEvents, specs)
                         debug('handleHotUpdate - support compile success');
                         devServerEvents.emit('dev-server:compile:success');
                         // if we update support we know we have to re-run it all
-                        // no need to ckeck further
+                        // no need to check further
                         return [];
                     }
                     if (mod.file && specsPathsSet.has(mod.file)) {
@@ -102,7 +97,7 @@ const makeCypressPlugin = (projectRoot, supportFilePath, devServerEvents, specs)
         },
     };
 };
-exports.makeCypressPlugin = makeCypressPlugin;
+exports.Cypress = Cypress;
 /**
  * Gets all the modules that import the set of modules passed in parameters
  * @param modules the set of module whose dependents to return

package/dist/plugins/index.d.ts

@@ -0,0 +1,2 @@
+export * from './inspect';
+export * from './cypress';

package/dist/plugins/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+(0, tslib_1.__exportStar)(require("./inspect"), exports);
+(0, tslib_1.__exportStar)(require("./cypress"), exports);

package/dist/plugins/inspect.d.ts

@@ -0,0 +1,3 @@
+import type { PluginOption } from 'vite';
+import type { ViteDevServerConfig } from '../devServer';
+export declare const CypressInspect: (config: ViteDevServerConfig) => PluginOption | null;

package/dist/plugins/inspect.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CypressInspect = void 0;
+const tslib_1 = require("tslib");
+const debug_1 = (0, tslib_1.__importDefault)(require("debug"));
+const debug = (0, debug_1.default)('cypress:vite-dev-server:plugins:inspect');
+const CypressInspect = (config) => {
+    var _a;
+    if (!process.env.CYPRESS_INTERNAL_VITE_INSPECT) {
+        debug('skipping vite inspect because CYPRESS_INTERNAL_VITE_INSPECT is not set');
+        return null;
+    }
+    let Inspect;
+    try {
+        const inspectPluginPath = require.resolve('vite-plugin-inspect', { paths: [config.cypressConfig.projectRoot] });
+        const inspectModule = require(inspectPluginPath);
+        Inspect = (_a = inspectModule.default) !== null && _a !== void 0 ? _a : inspectModule;
+        debug('inspect was found', Inspect);
+    }
+    catch (err) {
+        debug(`Tried to import the inspect plugin 'vite-plugin-inspect'. It's an optional peerDependency so install it if you'd like.`);
+        debug(err);
+        return null;
+    }
+    return Object.assign(Object.assign({}, Inspect()), { name: 'cypress:inspect' });
+};
+exports.CypressInspect = CypressInspect;

package/dist/resolveConfig.d.ts

@@ -0,0 +1,3 @@
+import type { ViteDevServerConfig } from './devServer';
+import type { Vite } from './getVite';
+export declare const createViteDevServerConfig: (config: ViteDevServerConfig, vite: Vite) => Promise<Record<string, any>>;

package/dist/resolveConfig.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createViteDevServerConfig = void 0;
+const tslib_1 = require("tslib");
+/**
+ * The logic inside of this file is heavily reused from
+ * Vitest's own config resolution logic.
+ * You can find it here https://github.com/vitest-dev/vitest/blob/main/packages/vitest/src/node/create.ts
+ */
+const debug_1 = (0, tslib_1.__importDefault)(require("debug"));
+const local_pkg_1 = require("local-pkg");
+const pathe_1 = require("pathe");
+const path_1 = (0, tslib_1.__importDefault)(require("path"));
+const constants_1 = require("./constants");
+const index_1 = require("./plugins/index");
+const debug = (0, debug_1.default)('cypress:vite-dev-server:resolve-config');
+const createViteDevServerConfig = async (config, vite) => {
+    const { specs, cypressConfig, viteConfig: viteOverrides } = config;
+    const root = cypressConfig.projectRoot;
+    const { default: findUp } = await (0, local_pkg_1.importModule)('find-up');
+    const configFile = await findUp(constants_1.configFiles, { cwd: root });
+    // INFO logging, a lot is logged here.
+    // debug('all dev-server options are', options)
+    if (configFile) {
+        debug('resolved config file at', configFile, 'using root', root);
+    }
+    else if (viteOverrides) {
+        debug(`Couldn't find a Vite config file, however we received a custom viteConfig`, viteOverrides);
+    }
+    else {
+        if (config.onConfigNotFound) {
+            config.onConfigNotFound('vite', root, constants_1.configFiles);
+            // The config process will be killed from the parent, but we want to early exit so we don't get
+            // any additional errors related to not having a config
+            process.exit(0);
+        }
+        else {
+            throw new Error(`Your component devServer config for vite is missing a required viteConfig property, since we could not automatically detect one.\n Please add one to your ${config.cypressConfig.configFile}`);
+        }
+    }
+    // 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
+    const vitePathNodeModules = path_1.default.dirname(path_1.default.dirname(require.resolve(`vite/package.json`, {
+        paths: [root],
+    })));
+    const viteBaseConfig = {
+        root,
+        base: `${cypressConfig.devServerPublicPathRoute}/`,
+        configFile,
+        optimizeDeps: {
+            esbuildOptions: {
+                incremental: true,
+                plugins: [
+                    {
+                        name: 'cypress-esbuild-plugin',
+                        setup(build) {
+                            build.onEnd(function (result) {
+                                // We don't want to completely fail the build here on errors so we treat the errors as warnings
+                                // which will handle things more gracefully. Vite will 500 on files that have errors when they
+                                // are requested later and Cypress will display an error message.
+                                // See: https://github.com/cypress-io/cypress/pull/21599
+                                result.warnings = [...result.warnings, ...result.errors];
+                                result.errors = [];
+                            });
+                        },
+                    },
+                ],
+            },
+            entries: [
+                ...specs.map((s) => (0, pathe_1.relative)(root, s.relative)),
+                ...(cypressConfig.supportFile ? [(0, pathe_1.resolve)(root, cypressConfig.supportFile)] : []),
+            ].filter((v) => v != null),
+        },
+        server: {
+            fs: {
+                allow: [
+                    root,
+                    vitePathNodeModules,
+                    cypressConfig.cypressBinaryRoot,
+                ],
+            },
+        },
+        plugins: [
+            (0, index_1.Cypress)(config, vite),
+            (0, index_1.CypressInspect)(config),
+        ].filter((p) => p != null),
+    };
+    const finalConfig = vite.mergeConfig(viteBaseConfig, viteOverrides);
+    debug('The resolved server config is', JSON.stringify(finalConfig, null, 2));
+    return finalConfig;
+};
+exports.createViteDevServerConfig = createViteDevServerConfig;

package/package.json

@@ -1,36 +1,33 @@
 {
   "name": "@cypress/vite-dev-server",
-  "version": "2.2.1",
+  "version": "3.0.0",
   "description": "Launches Vite Dev Server for Component Testing",
   "main": "index.js",
   "scripts": {
-    "build": "tsc",
-    "build-prod": "tsc",
-    "cy:open": "node ../../scripts/cypress.js open-ct --project ${PWD}",
-    "cy:run": "node ../../scripts/cypress.js run-ct --project ${PWD}",
-    "cy:run-signature": "yarn cy:run --config=\"{\\\"pluginsFile\\\":\\\"cypress/new-signature/plugins.js\\\"}\"",
-    "test": "yarn cy:run && yarn cy:run-signature",
-    "watch": "tsc -w"
+    "build": "tsc || echo 'built, with type errors'",
+    "build-prod": "tsc || echo 'built, with type errors'",
+    "check-ts": "tsc --noEmit",
+    "cypress:run": "yarn cypress:run-cypress-in-cypress node ../../scripts/cypress run --project . --browser chrome",
+    "cypress:run-cypress-in-cypress": "cross-env 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",
+    "test": "yarn test-unit",
+    "test-unit": "mocha -r ts-node/register/transpile-only --config ./test/.mocharc.js"
   },
   "dependencies": {
-    "debug": "^4.3.2",
-    "get-port": "^5.1.1"
+    "debug": "4.3.3",
+    "find-up": "6.3.0",
+    "local-pkg": "0.4.1",
+    "pathe": "0.2.0"
   },
   "devDependencies": {
-    "@cypress/react": "0.0.0-development",
-    "@cypress/vue": "0.0.0-development",
-    "@testing-library/cypress": "7.0.4",
-    "@vitejs/plugin-vue": "1.2.0",
-    "@vue/compiler-sfc": "3.0.9",
-    "cypress": "0.0.0-development",
-    "mocha-junit-reporter": "^2.0.0",
-    "mocha-multi-reporters": "^1.5.1",
-    "react": "17.0.2",
-    "vite": "2.2.3",
-    "vue": "3.0.11"
-  },
-  "peerDependencies": {
-    "vite": ">= 2.1.3"
+    "chai": "^4.3.6",
+    "dedent": "^0.7.0",
+    "mocha": "^9.2.2",
+    "sinon": "^13.0.1",
+    "ts-node": "^10.2.1",
+    "vite": "2.9.0-beta.3",
+    "vite-plugin-inspect": "0.4.3"
   },
   "files": [
     "dist",

package/dist/makeCypressPlugin.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="node" />
-/// <reference types="cypress" />
-import { Plugin } from 'vite';
-interface Spec {
-    absolute: string;
-    relative: string;
-}
-export declare const makeCypressPlugin: (projectRoot: string, supportFilePath: string | false, devServerEvents: NodeJS.EventEmitter, specs: Spec[]) => Plugin;
-export {};

package/dist/startServer.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="cypress" />
-import { ViteDevServer, InlineConfig } from 'vite';
-export interface StartDevServerOptions {
-    /**
-     * the Cypress dev server configuration object
-     */
-    options: Cypress.DevServerConfig;
-    /**
-     * By default, vite will use your vite.config file to
-     * Start the server. If you need additional plugins or
-     * to override some options, you can do so using this.
-     * @optional
-     */
-    viteConfig?: Omit<InlineConfig, 'base' | 'root'>;
-}
-export declare function start(devServerOptions: StartDevServerOptions): Promise<ViteDevServer>;

package/dist/startServer.js

@@ -1,66 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.start = 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 resolveServerConfig = async ({ viteConfig, options }) => {
-    const { projectRoot, supportFile } = options.config;
-    const requiredOptions = {
-        base: '/__cypress/src/',
-        root: projectRoot,
-    };
-    const finalConfig = { ...viteConfig, ...requiredOptions };
-    finalConfig.plugins = [...(finalConfig.plugins || []), 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?
-    try {
-        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'),
-        };
-    }
-    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' }),
-        // Ask vite to pre-optimize all dependencies of the specs
-        finalConfig.optimizeDeps = finalConfig.optimizeDeps || {};
-    // pre-optimize all the specs
-    if ((options.specs && options.specs.length)) {
-        // fix: we must preserve entries configured on target project
-        const existingOptimizeDepsEntries = finalConfig.optimizeDeps.entries;
-        if (existingOptimizeDepsEntries) {
-            finalConfig.optimizeDeps.entries = [...existingOptimizeDepsEntries, ...options.specs.map((spec) => spec.relative)];
-        }
-        else {
-            finalConfig.optimizeDeps.entries = [...options.specs.map((spec) => spec.relative)];
-        }
-        // only optimize a supportFile is it is not false or undefined
-        if (supportFile) {
-            // fix: on windows we need to replace backslashes with slashes
-            finalConfig.optimizeDeps.entries.push(supportFile.replace(/\\/g, '/'));
-        }
-    }
-    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;

package/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>AUT Frame</title>
-  </head>
-  <body>
-    <div id="__cy_root"></div>
-  </body>
-</html>