feat: Add typings for new devServer config (#18797)

cli/types/cypress-npm-api.d.ts

@@ -395,7 +395,7 @@ declare module 'cypress' {
      * @param {Cypress.ConfigOptions} config
      * @returns {Cypress.ConfigOptions} the configuration passed in parameter
      */
-    defineConfig(config: Cypress.ConfigOptions): Cypress.ConfigOptions
+    defineConfig<ComponentDevServerOpts = any>(config: Cypress.ConfigOptions<ComponentDevServerOpts>): Cypress.ConfigOptions
   }
 
   // export Cypress NPM module interface

cli/types/cypress.d.ts

@@ -2895,7 +2895,21 @@ declare namespace Cypress {
    * All configuration items are optional.
    */
   type CoreConfigOptions = Partial<Omit<ResolvedConfigOptions, TestingType>>
-  type ConfigOptions = CoreConfigOptions & { e2e?: CoreConfigOptions, component?: CoreConfigOptions }
+
+  interface ComponentConfigOptions<ComponentDevServerOpts = any> extends CoreConfigOptions {
+    // TODO(tim): Keeping optional until we land the implementation
+    devServer?: (cypressConfig: DevServerConfig, devServerConfig: ComponentDevServerOpts) => ResolvedDevServerConfig | Promise<ResolvedDevServerConfig>
+    devServerConfig?: ComponentDevServerOpts
+  }
+
+  /**
+   * Takes ComponentDevServerOpts to track the signature of the devServerConfig for the provided `devServer`,
+   * so we have proper completion for `devServerConfig`
+   */
+  type ConfigOptions<ComponentDevServerOpts = any> = CoreConfigOptions & {
+    e2e?: CoreConfigOptions,
+    component?: ComponentConfigOptions<ComponentDevServerOpts>
+  }
 
   interface PluginConfigOptions extends ResolvedConfigOptions {
     /**

npm/react/plugins/babel/index.d.ts

@@ -16,11 +16,6 @@ declare namespace legacyDevServer {
     indexHtml?: string
   }
 
-  /**
-   * Type helper to make writing `CypressBabelDevServerConfig` easier
-   */
-  function defineDevServerConfig(devServerConfig: CypressBabelDevServerConfig): CypressBabelDevServerConfig
-
   /**
    * Sets up a webpack dev server with the proper configuration for babel transpilation
    * @param cypressDevServerConfig comes from the `devServer()` function first argument

npm/react/plugins/babel/index.js

@@ -19,7 +19,3 @@ module.exports = getLegacyDevServer(devServer, (config) => {
 
 // New signature
 module.exports.devServer = devServer
-
-module.exports.defineDevServerConfig = function (devServerConfig) {
-  return devServerConfig
-}

npm/react/plugins/craco/index.d.ts

@@ -12,11 +12,6 @@ declare namespace legacyDevServer {
     indexHtml?: string
   }
 
-  /**
-   * Type helper to make writing `CypressCracoDevServerConfig` easier
-   */
-  function defineDevServerConfig(devServerConfig: CypressCracoDevServerConfig): CypressCracoDevServerConfig
-
   /**
    * Sets up a dev server for using Cypress compoennt testing with CRACO (https://github.com/gsoft-inc/craco)
    * @param cypressDevServerConfig comes from the `devServer()` function first argument

npm/react/plugins/craco/index.js

@@ -24,7 +24,3 @@ module.exports = getLegacyDevServer(devServer, (config) => {
 module.exports.devServer = (cypressDevServerConfig, { cracoConfig, indexHtml }) => {
   return devServer(cypressDevServerConfig, cracoConfig, indexHtml)
 }
-
-module.exports.defineDevServerConfig = function (devServerConfig) {
-  return devServerConfig
-}

npm/react/plugins/load-webpack/index.d.ts

@@ -12,11 +12,6 @@ declare namespace legacyDevServer {
     indexHtml?: string
   }
 
-  /**
-   * Type helper to make writing `CypressWebpackDevServerConfig` easier
-   */
-  function defineDevServerConfig(devServerConfig: CypressWebpackDevServerConfig): CypressWebpackDevServerConfig
-
   /**
    * Sets up a webpack dev server with the proper configuration for babel transpilation
    * @param cypressDevServerConfig comes from the `devServer()` function first argument

npm/react/plugins/load-webpack/index.js

@@ -38,7 +38,3 @@ module.exports = getLegacyDevServer(devServer, (config) => {
 
 // New signature
 module.exports.devServer = devServer
-
-module.exports.defineDevServerConfig = function (devServerConfig) {
-  return devServerConfig
-}

npm/react/plugins/next/index.d.ts

@@ -14,11 +14,6 @@ declare namespace legacyDevServer {
     indexHtml?: string
   }
 
-  /**
-   * Type helper to make writing `CypressNextDevServerConfig` easier
-   */
-  function defineDevServerConfig(devServerConfig: CypressNextDevServerConfig): CypressNextDevServerConfig
-
   /**
    * Sets up a Cypress component testing environment for your NextJs application
    * @param cypressDevServerConfig comes from the `devServer()` function first argument

npm/react/plugins/react-scripts/index.d.ts

@@ -12,11 +12,6 @@ declare namespace legacyDevServer {
     indexHtml?: string
   }
 
-  /**
-   * Type helper to make writing `CypressCRADevServerConfig` easier
-   */
-  function defineDevServerConfig(devServerConfig: CypressCRADevServerConfig): CypressCRADevServerConfig
-
   /**
    * Sets up a Cypress component testing environment for your Create React App environment
    * @param cypressDevServerConfig comes from the `devServer()` function first argument

npm/react/plugins/react-scripts/index.js

@@ -24,7 +24,3 @@ module.exports = getLegacyDevServer(devServer, (config) => {
 
 // New signature
 module.exports.devServer = devServer
-
-module.exports.defineDevServerConfig = function (devServerConfig) {
-  return devServerConfig
-}

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

@@ -5,15 +5,15 @@
  */
 
 const path = require('path')
-const { devServer, defineDevServerConfig } = require('../../dist')
+const { devServer } = require('../../dist')
 
 module.exports = (on, config) => {
   on('dev-server:start', async (options) => {
     return devServer(
       options,
-      defineDevServerConfig({
+      {
         configFile: path.resolve(__dirname, '..', '..', 'vite.config.ts'),
-      }),
+      },
     )
   })
 

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

@@ -21,7 +21,3 @@ 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

@@ -71,7 +71,3 @@ export function devServer (cypressDevServerConfig: Cypress.DevServerConfig, devS
     template: devServerConfig?.template,
   })
 }
-
-export function defineDevServerConfig (devServerConfig: CypressWebpackDevServerConfig) {
-  return devServerConfig
-}

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 { defineDevServerConfig, devServer, startDevServer } from '../'
+import { devServer, startDevServer } from '../'
 
 const requestSpecFile = (port: number) => {
   return new Promise((res) => {
@@ -164,7 +164,7 @@ describe('#startDevServer', () => {
         specs,
         devServerEvents,
       },
-      defineDevServerConfig({ webpackConfig }),
+      { webpackConfig },
     )
 
     const response = await requestSpecFile(port as number)

packages/data-context/src/codegen/sample-config-files.ts

@@ -3,16 +3,16 @@ import type { SampleConfigFile } from '@packages/types'
 
 // FIXME: temporary content
 const content = `import { defineConfig } from 'cypress'
-import { devServer, defineDevServerConfig } from '@cypress/vite-dev-server'
+import { devServer } from '@cypress/vite-dev-server'
 
 // sample code !!!
 
 export default defineConfig({
   component: {
     devServer,
-    devServerConfig: defineDevServerConfig({
+    devServerConfig: {
       entryHtmlFile: 'cypress/component/support/entry.html'
-    }),
+    },
   },
 })`
 

packages/frontend-shared/src/components/ShikiHighlight.spec.tsx

@@ -2,14 +2,14 @@ import ShikiHighlight, { initHighlighter } from './ShikiHighlight.vue'
 import code from '../../windi.config?raw'
 
 const devServerCode = `const { defineConfig } = require('cypress')
-const { devServer, defineDevServerConfig } = require('@cypress/vite-dev-server')
+const { devServer } = require('@cypress/vite-dev-server')
 
 module.exports = defineConfig({
   component: {
     devServer,
-    devServerConfig: defineDevServerConfig({
+    devServerConfig: {
       entryHtmlFile: 'cypress/component/support/entry.html'
-    }),
+    },
   },
 })`
 

packages/launchpad/src/components/code/FileRow.spec.tsx

@@ -4,14 +4,14 @@ import faker from 'faker'
 import { defaultMessages } from '@cy/i18n'
 
 const content = `import { defineConfig } from 'cypress'
-import { devServer, defineDevServerConfig } from '@cypress/vite-dev-server'
+import { devServer } from '@cypress/vite-dev-server'
 
 export default defineConfig({
   component: {
     devServer,
-    devServerConfig: defineDevServerConfig({
+    devServerConfig: {
       entryHtmlFile: 'cypress/component/support/entry.html'
-    }),
+    },
   },
 })`