feat: normalized signatures webpack & vite servers (#18379)

npm/vite-dev-server/cypress/new-signature/plugins.js

@@ -0,0 +1,23 @@
+/**
+ * This file is intended to test the new normalized signature
+ * of devServers. To make the test shorter we only test
+ * the smkoke test here
+ */
+
+const path = require('path')
+const { devServer, defineDevServerConfig } = require('../../dist')
+
+module.exports = (on, config) => {
+  on('dev-server:start', async (options) => {
+    return devServer(
+      options,
+      defineDevServerConfig({
+        configFile: path.resolve(__dirname, '..', '..', 'vite.config.ts'),
+      }),
+    )
+  })
+
+  config.testFiles = '**/smoke.spec.ts'
+
+  return config
+}

npm/vite-dev-server/package.json

@@ -8,7 +8,8 @@
     "build-prod": "tsc",
     "cy:open": "node ../../scripts/cypress.js open-ct --project ${PWD}",
     "cy:run": "node ../../scripts/cypress.js run-ct --project ${PWD}",
-    "test": "yarn cy:run",
+    "cy:run-signature": "yarn cy:run --config=\"{\\\"pluginsFile\\\":\\\"cypress/new-signature/plugins.js\\\"}\"",
+    "test": "yarn cy:run && yarn cy:run-signature",
     "watch": "tsc -w"
   },
   "dependencies": {

npm/vite-dev-server/src/index.ts

@@ -1,4 +1,5 @@
 import { debug as debugFn } from 'debug'
+import { InlineConfig } from 'vite'
 import { start as createDevServer, StartDevServerOptions } from './startServer'
 const debug = debugFn('cypress:vite-dev-server:vite')
 
@@ -14,3 +15,13 @@ export async function startDevServer (startDevServerArgs: StartDevServerOptions)
 
   return { port, close: app.httpServer!.close }
 }
+
+export type CypressViteDevServerConfig = Omit<InlineConfig, 'base' | 'root'>
+
+export function devServer (cypressDevServerConfig: Cypress.DevServerConfig, devServerConfig?: CypressViteDevServerConfig) {
+  return startDevServer({ options: cypressDevServerConfig, viteConfig: devServerConfig })
+}
+
+export function defineDevServerConfig (devServerConfig: CypressViteDevServerConfig) {
+  return devServerConfig
+}

npm/webpack-dev-server/src/index.ts

@@ -1,7 +1,7 @@
 import { debug as debugFn } from 'debug'
 import { AddressInfo } from 'net'
 import { Server } from 'http'
-import { start as createDevServer, StartDevServer } from './startServer'
+import { start as createDevServer, StartDevServer, WebpackConfigurationWithDevServer } from './startServer'
 import { webpackDevServerFacts } from './webpackDevServerFacts'
 
 const debug = debugFn('cypress:webpack-dev-server:webpack')
@@ -56,3 +56,22 @@ export async function startDevServer (startDevServerArgs: StartDevServer, exitPr
     reject(webpackDevServerFacts.unsupported())
   })
 }
+
+export interface CypressWebpackDevServerConfig{
+  /* support passing a path to the user's webpack config */
+  webpackConfig?: WebpackConfigurationWithDevServer
+  /* base html template to render in AUT */
+  template?: string
+}
+
+export function devServer (cypressDevServerConfig: Cypress.DevServerConfig, devServerConfig?: CypressWebpackDevServerConfig) {
+  return startDevServer({
+    options: cypressDevServerConfig,
+    webpackConfig: devServerConfig?.webpackConfig,
+    template: devServerConfig?.template,
+  })
+}
+
+export function defineDevServerConfig (devServerConfig: CypressWebpackDevServerConfig) {
+  return devServerConfig
+}

npm/webpack-dev-server/src/startServer.ts

@@ -7,12 +7,16 @@ import { webpackDevServerFacts } from './webpackDevServerFacts'
 export interface StartDevServer extends UserWebpackDevServerOptions {
   /* this is the Cypress dev server configuration object */
   options: Cypress.DevServerConfig
-  /* support passing a path to the user's webpack config */
-  webpackConfig?: Record<string, any>
+  /* Base webpack config object used for loading component testing */
+  webpackConfig?: WebpackConfigurationWithDevServer
   /* base html template to render in AUT */
   template?: string
 }
 
+export interface WebpackConfigurationWithDevServer extends webpack.Configuration {
+  devServer?: WebpackDevServer.Configuration
+}
+
 const debug = Debug('cypress:webpack-dev-server:start')
 
 export async function start ({ webpackConfig: userWebpackConfig, template, options, ...userOptions }: StartDevServer, exitProcess = process.exit): Promise<WebpackDevServer> {
@@ -49,7 +53,7 @@ export async function start ({ webpackConfig: userWebpackConfig, template, optio
 
   debug('starting webpack dev server')
   let webpackDevServerConfig: WebpackDevServer.Configuration = {
-    ...userWebpackConfig?.devServer,
+    ...(userWebpackConfig?.devServer || {}),
     hot: false,
   }
 

npm/webpack-dev-server/test/e2e.spec.ts

@@ -6,7 +6,7 @@ import http from 'http'
 import fs from 'fs'
 import { webpackDevServerFacts } from '../src/webpackDevServerFacts'
 
-import { startDevServer } from '../'
+import { defineDevServerConfig, devServer, startDevServer } from '../'
 
 const requestSpecFile = (port: number) => {
   return new Promise((res) => {
@@ -155,4 +155,24 @@ describe('#startDevServer', () => {
       close(() => res())
     })
   })
+
+  it('accepts the devServer signature', async function () {
+    const devServerEvents = new EventEmitter()
+    const { port, close } = await devServer(
+      {
+        config,
+        specs,
+        devServerEvents,
+      },
+      defineDevServerConfig({ webpackConfig }),
+    )
+
+    const response = await requestSpecFile(port as number)
+
+    expect(response).to.eq('const foo = () => {}\n')
+
+    return new Promise((res) => {
+      close(() => res())
+    })
+  })
 })