feat: adding vite-dev-server plugin

[JessicaSachs]

Terminal Screenshot

Userspace Usage

Identical to @cypress/webpack-dev-server

// plugins.js file
import { startDevServer } from '@cypress/vite-dev-server'

module.exports = (on, config) => {
  on('dev-server:start', async (options) => {
    // viteConfig is optional -- we need tests for this in a playground
    return startDevServer({ options }) 
  })

  return config
}

How to test (isolated -- no components)

1. yarn install
2. cd npm/vite-dev-server
3. yarn cy:open # or yarn cy:run

TODO

Re-running specs when the dependency graph changes
Updating the watched specs or their dependencies does not restart the Cypress runner. Manually restarting the test does trigger a re-run with the updated source in the dep graph. Need to figure out the right hooks inside of Vite to do manually do this.

Compilation error handling
We do not proxy up compile errors via the devServerEvents EE

Playground Tests
The Vite tests test loading specs via the dev-server:start plugin hook. We still need to go through the playground examples (Vite has their own playground we can use!)

Performance
Compared to Vite, Cypress's server startup is slow -- even without a lot of the bulk for E2E. When we were using webpack, we appeared much faster by comparison. I think Cypress's slowness is more noticeable.

How has the user experience changed?

Users are able to test vite apps via @cypress/vite-dev-server. The tests for vite-dev-server dogfood themselves so the plugins file there can be used as reference.

• Have tests been added/updated?

[cypress-bot]

Thanks for taking the time to open a PR!

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
• Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

[lmiller1990]

I just left comment (above, to do with merging in the latest feat/component-testing). I tried it out locally like you said in the PR description and it works fine - vite starts up very quickly, cypress feels like a snail in comparison!

This is great, I can't wait to try moving my example project to use this instead of webpack.

[cypress]

---

Test summary

3974 • 0 • 52 • 1

---

Run details

Project	cypress
Status	Passed
Commit	1ef720c
Started	Feb 10, 2021 9:34 PM
Ended	Feb 10, 2021 9:45 PM
Duration	10:37 💡
OS	Linux Debian - 10.5
Browser	Firefox 77

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[dmtrKovalenko]

Is it possible at all to subscribe to hooks for rerunning specs/showing errors?

[dmtrKovalenko]

Making it not mergeable until rerunning and showing errors will be implemented

[JessicaSachs]

@dmtrKovalenko

Making it not mergeable until rerunning and showing errors will be implemented

I don't know if this will be possible or easy right now. I want to merge it without these features. It is still valuable without them. We did not have these features for webpack for quite a while and it was fine.

[dmtrKovalenko]

I read in docs that they have a plug-in system implemented. If not, of course it is valuable - I'll take a look tomorrow.

[JessicaSachs]

@dmtrKovalenko they do have a plugin system implemented. We're using it already -- we're using the configureServer hook here. There are additional hooks. I need to read the source and play around to see what we have available to catch errors and pass them through the Cypress devServer EE.

We don't need to impl this to ship this plugin. It functionally works without passing errors to the UI.

The base branch was changed.

[lmiller1990]

@JessicaSachs can we move this to a new PR

[elevatebart]

Good !!