feat: use devServer instad of startDevServer (#20092)

* feat: use devServer instad of startDevServer

* Fix tests

* Update with feedback

Co-authored-by: Zachary Williams <ZachJW34@gmail.com>

npm/angular/cypress.config.ts

@@ -1,4 +1,6 @@
 import { defineConfig } from 'cypress'
+import { devServer } from '@cypress/webpack-dev-server'
+import * as webpackConfig from './cypress/plugins/webpack.config'
 
 export default defineConfig({
   'experimentalFetchPolyfill': true,
@@ -10,14 +12,7 @@ export default defineConfig({
     setupNodeEvents (on, config) {
       return require('./cypress/plugins')(on, config)
     },
-    devServer (cypressDevServerConfig) {
-      const { startDevServer } = require('@cypress/webpack-dev-server')
-      const webpackConfig = require('./cypress/plugins/webpack.config')
-
-      return startDevServer({
-        options: cypressDevServerConfig,
-        webpackConfig,
-      })
-    },
+    devServer,
+    devServerConfig: { webpackConfig },
   },
 })

npm/design-system/cypress.config.js

@@ -1,3 +1,5 @@
+const { devServer } = require('@cypress/vite-dev-server')
+
 module.exports = {
   viewportWidth: 1024,
   viewportHeight: 800,
@@ -12,10 +14,6 @@ module.exports = {
       '**/__snapshots__/*',
       '**/__image_snapshots__/*',
     ],
-    devServer (cypressDevServerConfig) {
-      const { startDevServer } = require('@cypress/vite-dev-server')
-
-      return startDevServer({ options: cypressDevServerConfig })
-    },
+    devServer,
   },
 }

npm/react/cypress.config.js

@@ -1,4 +1,5 @@
 // @ts-check
+const { devServer } = require('@cypress/webpack-dev-server')
 
 module.exports = {
   'viewportWidth': 400,
@@ -16,7 +17,6 @@ module.exports = {
       'examples/**/*',
     ],
     devServer (cypressDevServerConfig, devServerConfig) {
-      const { startDevServer } = require('@cypress/webpack-dev-server')
       const path = require('path')
       const babelConfig = require('./babel.config.js')
 
@@ -73,7 +73,7 @@ module.exports = {
         },
       }
 
-      return startDevServer({ options: cypressDevServerConfig, disableLazyCompilation: false, webpackConfig })
+      return devServer(cypressDevServerConfig, { webpackConfig })
     },
   },
 }

npm/react/examples/find-webpack/cypress.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'cypress'
+import { devServer } from '@cypress/webpack-dev-server'
 
 export default defineConfig({
   'video': true,
@@ -6,7 +7,6 @@ export default defineConfig({
   'component': {
     devServer (cypressDevServerConfig) {
       const findReactScriptsWebpackConfig = require('@cypress/react/plugins/react-scripts/findReactScriptsWebpackConfig')
-      const { startDevServer } = require('@cypress/webpack-dev-server')
       const _ = require('lodash')
 
       const map = _.map([4, 8], (n) => n * 2)
@@ -19,7 +19,7 @@ export default defineConfig({
 
       typeof babelRule.options !== 'string' && babelRule.options.plugins.push(require.resolve('babel-plugin-istanbul'))
 
-      return startDevServer({ options: cypressDevServerConfig, webpackConfig })
+      return devServer(cypressDevServerConfig, { webpackConfig })
     },
     setupNodeEvents (on, config) {
       require('@cypress/code-coverage/task')(on, config)

npm/react/examples/webpack-options/cypress.config.js

@@ -1,3 +1,5 @@
+const { devServer } = require('@cypress/webpack-dev-server')
+
 module.exports = {
   'video': false,
   'fixturesFolder': false,
@@ -6,7 +8,6 @@ module.exports = {
   'component': {
     devServer (cypressDevServerConfig) {
       const path = require('path')
-      const { startDevServer } = require('@cypress/webpack-dev-server')
       const babelConfig = require('./babel.config')
 
       /** @type import("webpack").Configuration */
@@ -34,7 +35,7 @@ module.exports = {
 
       process.env.BABEL_ENV = 'test' // this is required to load commonjs babel plugin
 
-      return startDevServer({ options: cypressDevServerConfig, webpackConfig })
+      return devServer(cypressDevServerConfig, { webpackConfig })
     },
   },
 }

npm/vite-dev-server/cypress.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'cypress'
+import { devServer } from './dist'
 
 export default defineConfig({
   'pluginsFile': 'cypress/plugins.js',
@@ -8,13 +9,9 @@ export default defineConfig({
     'supportFile': 'cypress/support.js',
     devServer (cypressDevServerConfig) {
       const path = require('path')
-      const { startDevServer } = require('./dist')
 
-      return startDevServer({
-        options: cypressDevServerConfig,
-        viteConfig: {
-          configFile: path.resolve(__dirname, 'vite.config.ts'),
-        },
+      return devServer(cypressDevServerConfig, {
+        configFile: path.resolve(__dirname, 'vite.config.ts'),
       })
     },
   },

npm/vue/cypress.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'cypress'
+import { devServer } from '@cypress/webpack-dev-server'
 
 export default defineConfig({
   'viewportWidth': 500,
@@ -13,7 +14,6 @@ export default defineConfig({
   'component': {
     excludeSpecPattern: 'examples/**/*',
     devServer (cypressDevServerConfig) {
-      const { startDevServer } = require('@cypress/webpack-dev-server')
       const webpackConfig = require('./webpack.config')
 
       if (!webpackConfig.resolve) {
@@ -25,7 +25,7 @@ export default defineConfig({
         '@vue/compiler-core$': '@vue/compiler-core/dist/compiler-core.cjs.js',
       }
 
-      return startDevServer({ options: cypressDevServerConfig, webpackConfig })
+      return devServer(cypressDevServerConfig, { webpackConfig })
     },
     setupNodeEvents (on, config) {
       require('@cypress/code-coverage/task')(on, config)

npm/vue/examples/code-coverage/cypress.config.js

@@ -1,16 +1,12 @@
+const { devServer } = require('@cypress/webpack-dev-server')
+const webpackConfig = require('./webpack.config')
+
 module.exports = {
   'fixturesFolder': false,
   'video': false,
   'component': {
-    devServer (cypressDevServerConfig) {
-      const { startDevServer } = require('@cypress/webpack-dev-server')
-      const webpackConfig = require('./webpack.config')
-
-      return startDevServer({
-        options: cypressDevServerConfig,
-        webpackConfig,
-      })
-    },
+    devServer,
+    devServerConfig: { webpackConfig },
     setupNodeEvents (on, config) {
       require('@cypress/code-coverage/task')(on, config)
 

npm/vue/examples/vue-cli/cypress.config.js

@@ -1,27 +1,23 @@
+const { devServer } = require('@cypress/webpack-dev-server')
+const webpackConfig = require('@vue/cli-service/webpack.config')
+
 module.exports = {
   'video': false,
   'fixturesFolder': false,
   'component': {
-    devServer (cypressDevServerConfig) {
-      const { startDevServer } = require('@cypress/webpack-dev-server')
-      const webpackConfig = require('@vue/cli-service/webpack.config')
-
+    devServer,
+    devServerConfig: {
       // HtmlPwaPlugin is coupled to a hook in HtmlWebpackPlugin
       // that was deprecated after 3.x. We currently only support
       // HtmlWebpackPlugin 4.x and 5.x.
       // TODO: Figure out how to deal with 2 major versions old HtmlWebpackPlugin
       // which is still in widespread usage.
-      const modifiedWebpackConfig = {
+      webpackConfig: {
         ...webpackConfig,
         plugins: (webpackConfig.plugins || []).filter((x) => {
           return x.constructor.name !== 'HtmlPwaPlugin'
         }),
-      }
-
-      return startDevServer({
-        options: cypressDevServerConfig,
-        webpackConfig: modifiedWebpackConfig,
-      })
+      },
     },
     setupNodeEvents (on, config) {
       require('@cypress/code-coverage/task')(on, config)

packages/frontend-shared/cypress.config.ts

@@ -1,4 +1,6 @@
 import { defineConfig } from 'cypress'
+import { devServer } from '@cypress/vite-dev-server'
+
 import getenv from 'getenv'
 
 const CYPRESS_INTERNAL_CLOUD_ENV = getenv('CYPRESS_INTERNAL_CLOUD_ENV', process.env.CYPRESS_INTERNAL_ENV || 'development')
@@ -16,21 +18,12 @@ export default defineConfig({
     'configFile': '../../mocha-reporter-config.json',
   },
   'component': {
-    devServer (cypressDevServerConfig, devServerConfig) {
-      const { startDevServer } = require('@cypress/vite-dev-server')
-
-      return startDevServer({
-        options: cypressDevServerConfig,
-        ...devServerConfig,
-      })
-    },
+    devServer,
     devServerConfig: {
-      viteConfig: {
-        optimizeDeps: {
-          include: [
-            '@packages/ui-components/cypress/support/customPercyCommand',
-          ],
-        },
+      optimizeDeps: {
+        include: [
+          '@packages/ui-components/cypress/support/customPercyCommand',
+        ],
       },
     },
   },

packages/launchpad/cypress.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from 'cypress'
 import getenv from 'getenv'
+import { devServer } from '@cypress/vite-dev-server'
 
 const CYPRESS_INTERNAL_CLOUD_ENV = getenv('CYPRESS_INTERNAL_CLOUD_ENV', process.env.CYPRESS_INTERNAL_ENV || 'development')
 
@@ -17,21 +18,12 @@ export default defineConfig({
   },
   'component': {
     'supportFile': 'cypress/component/support/index.ts',
-    devServer (cypressDevServerConfig, devServerConfig) {
-      const { startDevServer } = require('@cypress/vite-dev-server')
-
-      return startDevServer({
-        options: cypressDevServerConfig,
-        ...devServerConfig,
-      })
-    },
+    devServer,
     devServerConfig: {
-      viteConfig: {
-        optimizeDeps: {
-          include: [
-            '@packages/ui-components/cypress/support/customPercyCommand',
-          ],
-        },
+      optimizeDeps: {
+        include: [
+          '@packages/ui-components/cypress/support/customPercyCommand',
+        ],
       },
     },
   },

packages/runner-ct/cypress.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'cypress'
+import { devServer } from '@cypress/webpack-dev-server'
 
 export default defineConfig({
   video: true,
@@ -11,8 +12,6 @@ export default defineConfig({
   },
   component: {
     devServer (cypressDevServerConfig) {
-      const { startDevServer } = require('@cypress/webpack-dev-server')
-
       function injectStylesInlineForPercyInPlace (webpackConfig) {
         webpackConfig.module.rules = webpackConfig.module.rules.map((rule) => {
           if (rule?.use?.[0]?.loader.includes('mini-css-extract-plugin')) {
@@ -32,10 +31,7 @@ export default defineConfig({
 
       injectStylesInlineForPercyInPlace(webpackConfig)
 
-      return startDevServer({
-        webpackConfig,
-        options: cypressDevServerConfig,
-      })
+      return devServer(cypressDevServerConfig, { webpackConfig })
     },
   },
 })

system-tests/projects/component-tests/cypress.config.js

@@ -1,3 +1,5 @@
+const { devServer } = require('@cypress/webpack-dev-server')
+
 module.exports = {
   'projectId': 'abc123',
   e2e: {
@@ -5,11 +7,7 @@ module.exports = {
   },
   component: {
     specPattern: 'cypress/component-tests/**/*',
-    devServer (cypressDevServerConfig, devServerConfig) {
-      const { startDevServer } = require('@cypress/webpack-dev-server')
-
-      return startDevServer({ options: cypressDevServerConfig, ...devServerConfig })
-    },
+    devServer,
     devServerConfig: {
       webpackConfig: {
         output: {

system-tests/projects/e2e/cypress.config.js

@@ -1,3 +1,5 @@
+const { devServer } = require('@cypress/webpack-dev-server')
+
 const plugin = require('./cypress/plugins')
 
 module.exports = {
@@ -10,11 +12,7 @@ module.exports = {
   'component': {
     'supportFile': false,
     'specPattern': 'cypress/component/**/*spec.js',
-    devServer (cypressDevServerConfig, devServerConfig) {
-      const { startDevServer } = require('@cypress/webpack-dev-server')
-
-      return startDevServer({ options: cypressDevServerConfig, ...devServerConfig })
-    },
+    devServer,
     devServerConfig: {
       webpackConfig: {
         output: {

system-tests/projects/react-code-gen/cypress.config.js

@@ -1,12 +1,10 @@
+const { devServer } = require('@cypress/webpack-dev-server')
+
 module.exports = {
   component: {
     supportFile: 'cypress/component/support.js',
     specPattern: 'src/**/*.cy.{js,jsx}',
-    devServer (cypressDevServerConfig, devServerConfig) {
-      const { startDevServer } = require('@cypress/webpack-dev-server')
-
-      return startDevServer({ options: cypressDevServerConfig, ...devServerConfig })
-    },
+    devServer,
   },
   e2e: {
     supportFile: 'cypress/component/support.js',

system-tests/projects/simple-ct/cypress.config.js

@@ -1,17 +1,13 @@
+const { devServer } = require('@cypress/webpack-dev-server')
+
 module.exports = {
   'component': {
     supportFile: false,
-    devServer (cypressDevServerConfig) {
-      const { startDevServer } = require('@cypress/webpack-dev-server')
-
-      return startDevServer({
-        options: cypressDevServerConfig,
-        webpackConfig: {
-          output: {
-            publicPath: '/',
-          },
-        },
-      })
+    devServer,
+    devServerConfig: {
+      output: {
+        publicPath: '/',
+      },
     },
   },
 }

system-tests/projects/spec-generation/cypress.config.js

@@ -1,12 +1,10 @@
+const { devServer } = require('@cypress/webpack-dev-server')
+
 module.exports = {
   'componentFolder': 'src',
   'component': {
     'supportFile': false,
-    devServer (cypressDevServerConfig, devServerConfig) {
-      const { startDevServer } = require('@cypress/webpack-dev-server')
-
-      return startDevServer({ options: cypressDevServerConfig, ...devServerConfig })
-    },
+    devServer,
     devServerConfig: {
       webpackConfig: {
         output: {

system-tests/projects/unify-onboarding-with-config/cypress.config.js

@@ -1,18 +1,15 @@
+const { devServer } = require('@cypress/webpack-dev-server')
+
 module.exports = {
   component: {
     supportFile: false,
     testFiles: '**/*cy-spec.{js,jsx,ts,tsx}',
     componentFolder: 'src',
-    devServer (cypressDevServerConfig) {
-      const { startDevServer } = require('@cypress/webpack-dev-server')
-
-      return startDevServer({
-        options: cypressDevServerConfig,
-        webpackConfig: {
-          output: {
-            publicPath: '/',
-          },
-        } })
+    devServer,
+    devServerConfig: {
+      output: {
+        publicPath: '/',
+      },
     },
   },
   e2e: {

system-tests/projects/unify-onboarding/cypress.config.js

@@ -1,15 +1,12 @@
+const { devServer } = require('@cypress/webpack-dev-server')
+
 module.exports = {
   'component': {
-    devServer (cypressDevServerConfig) {
-      const { startDevServer } = require('@cypress/webpack-dev-server')
-
-      return startDevServer({
-        options: cypressDevServerConfig,
-        webpackConfig: {
-          output: {
-            publicPath: '/',
-          },
-        } })
+    devServer,
+    devServerConfig: {
+      output: {
+        publicPath: '/',
+      },
     },
   },
   'e2e': {