Skip to content

Commit

Permalink
breaking: dropping support for webpack-dev-server 3 from @cypress/web…
Browse files Browse the repository at this point in the history
…pack-dev-server

    BREAKING CHANGE: support for webpack-dev-server version 3 has been removed. webpack-dev-server 3 is no longer maintained by the webpack team. To reduce overhead, Cypress is now removing support in Cypress 14.
  • Loading branch information
AtofStryker committed Oct 25, 2024
1 parent fd8c2a3 commit 1987422
Show file tree
Hide file tree
Showing 29 changed files with 1,056 additions and 29,052 deletions.
6 changes: 3 additions & 3 deletions npm/webpack-dev-server/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,9 @@ This module should be primarily covered by system-tests / open-mode tests. All s

`webpack${major}_wds${devServerMajor}-$framework{-$variant}`

- webpack4_wds3-react
- webpack4_wds4-react
- webpack5_wds5-react
- webpack4_wds4-next-11
- webpack5_wds3-next-12
- webpack4_wds4-create-react-app

## Architecture
Expand All @@ -69,7 +68,8 @@ We then merge the sourced config with the user's webpack config, and layer on ou
| --------------------------- | ------- |
| <= v1 | <= v9 |
| >= v2 | >= v10 |
| >= v4 | >= v13 |
| >= v3 | >= v13 |
| >= v4 | >= v14 |

## License

Expand Down
26 changes: 0 additions & 26 deletions npm/webpack-dev-server/__snapshots__/makeWebpackConfig.spec.ts.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ exports['makeWebpackConfig ignores userland webpack `output.publicPath` and `dev
'filename': '[name].js',
},
'devServer': {
'magicHtml': true,
'client': {
'progress': false,
'overlay': false,
Expand All @@ -25,37 +24,12 @@ exports['makeWebpackConfig ignores userland webpack `output.publicPath` and `dev
],
}

exports['makeWebpackConfig ignores userland webpack `output.publicPath` and `devServer.overlay` with webpack-dev-server v3 1'] = {
'output': {
'publicPath': '/test-public-path/',
'filename': '[name].js',
},
'devServer': {
'progress': true,
'overlay': false,
},
'optimization': {
'noEmitOnErrors': false,
'sideEffects': false,
'splitChunks': {
'chunks': 'all',
},
},
'devtool': 'inline-source-map',
'mode': 'development',
'plugins': [
'HtmlWebpackPlugin',
'CypressCTWebpackPlugin',
],
}

exports['makeWebpackConfig ignores userland webpack `output.publicPath` and `devServer.overlay` with webpack-dev-server v5 1'] = {
'output': {
'publicPath': '/test-public-path/',
'filename': '[name].js',
},
'devServer': {
'magicHtml': true,
'client': {
'progress': false,
'overlay': false,
Expand Down
2 changes: 1 addition & 1 deletion npm/webpack-dev-server/cypress/e2e/create-react-app.cy.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/// <reference path="../support/e2e.ts" />
import type { ProjectFixtureDir } from '@tooling/system-tests/lib/fixtureDirs'

const WEBPACK_REACT: ProjectFixtureDir[] = ['cra-4', 'cra-5', 'cra-ejected']
const WEBPACK_REACT: ProjectFixtureDir[] = ['cra-5', 'cra-ejected']

// Add to this list to focus on a particular permutation
const ONLY_PROJECTS: ProjectFixtureDir[] = []
Expand Down
2 changes: 1 addition & 1 deletion npm/webpack-dev-server/cypress/e2e/react.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import dedent from 'dedent'

type ProjectDirs = typeof fixtureDirs

const WEBPACK_REACT: ProjectDirs[number][] = ['webpack4_wds3-react', 'webpack4_wds4-react', 'webpack5_wds3-react', 'webpack5_wds4-react', 'webpack5_wds5-react']
const WEBPACK_REACT: ProjectDirs[number][] = ['webpack4_wds4-react', 'webpack5_wds4-react', 'webpack5_wds5-react']

// Add to this list to focus on a particular permutation
const ONLY_PROJECTS: ProjectDirs[number][] = []
Expand Down
6 changes: 2 additions & 4 deletions npm/webpack-dev-server/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,13 @@
"semver": "^7.5.3",
"speed-measure-webpack-plugin": "1.4.2",
"tslib": "^2.3.1",
"webpack-dev-server": "^4.15.2",
"webpack-dev-server": "^5.1.0",
"webpack-merge": "^5.4.0"
},
"devDependencies": {
"@types/node": "18.17.5",
"@types/proxyquire": "^1.3.28",
"@types/speed-measure-webpack-plugin": "^1.3.4",
"@types/webpack-dev-server-3": "npm:@types/webpack-dev-server@^3",
"chai": "^4.3.6",
"dedent": "^0.7.0",
"mocha": "^9.2.2",
Expand All @@ -42,8 +41,7 @@
"ts-node": "^10.9.2",
"webpack": "npm:webpack@^5",
"webpack-4": "npm:webpack@^4",
"webpack-dev-server-3": "npm:webpack-dev-server@^3",
"webpack-dev-server-5": "npm:webpack-dev-server@^5"
"webpack-dev-server-4": "npm:webpack-dev-server@^5"
},
"files": [
"dist"
Expand Down
41 changes: 2 additions & 39 deletions npm/webpack-dev-server/src/createWebpackDevServer.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import debugLib from 'debug'
import type { Configuration as WebpackDevServer3Configuration } from 'webpack-dev-server-3'
import type { Configuration as WebpackDevServer4Configuration } from 'webpack-dev-server'
import type { Configuration as WebpackDevServer5Configuration } from 'webpack-dev-server-5'

import type { Configuration as WebpackDevServer5Configuration } from 'webpack-dev-server'
import type { Configuration as WebpackDevServer4Configuration } from 'webpack-dev-server-4'
import type { WebpackDevServerConfig } from './devServer'
import type { SourceRelativeWebpackResult } from './helpers/sourceRelativeWebpackModules'
import { makeWebpackConfig } from './makeWebpackConfig'
Expand Down Expand Up @@ -59,12 +57,6 @@ export async function createWebpackDevServer (
return webpackDevServer4(config, webpackCompiler, finalWebpackConfig)
}

if (webpackDevServerMajorVersion === 3) {
debug('using webpack-dev-server v3')

return webpackDevServer3(config, webpackCompiler, finalWebpackConfig)
}

throw new Error(`Unsupported webpackDevServer version ${webpackDevServerMajorVersion}`)
}

Expand Down Expand Up @@ -132,32 +124,3 @@ function webpackDevServer4 (
compiler,
}
}

function webpackDevServer3 (
config: CreateFinalWebpackConfig,
compiler: object,
finalWebpackConfig: Record<string, any>,
) {
const { devServerConfig: { cypressConfig: { devServerPublicPathRoute } } } = config
const isOpenMode = !config.devServerConfig.cypressConfig.isTextTerminal
const WebpackDevServer = config.sourceWebpackModulesResult.webpackDevServer.module
const webpackDevServerConfig: WebpackDevServer3Configuration = {
// @ts-ignore
...finalWebpackConfig.devServer ?? {},
hot: false,
// @ts-ignore ignore webpack-dev-server v3 type errors
inline: false,
publicPath: devServerPublicPathRoute,
noInfo: false,
stats: finalWebpackConfig.stats ?? 'minimal',
// Only enable file watching & reload when executing tests in `open` mode
liveReload: isOpenMode,
}

const server = new WebpackDevServer(compiler, webpackDevServerConfig)

return {
server,
compiler,
}
}
42 changes: 7 additions & 35 deletions npm/webpack-dev-server/src/devServer.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
/// <reference types="cypress" />

import type WebpackDevServer from 'webpack-dev-server'
import type WebpackDevServer5 from 'webpack-dev-server'
import type WebpackDevServer4 from 'webpack-dev-server-4'

import type { Compiler, Configuration } from 'webpack'

import { createWebpackDevServer } from './createWebpackDevServer'
import type { AddressInfo } from 'net'
import debugLib from 'debug'
import type { Server } from 'http'
import { vueCliHandler } from './helpers/vueCliHandler'
import { nuxtHandler } from './helpers/nuxtHandler'
import { createReactAppHandler } from './helpers/createReactAppHandler'
Expand Down Expand Up @@ -43,12 +43,12 @@ export type WebpackDevServerConfig = {
* @internal
*/
type DevServerCreateResult = {
version: 3
server: Server
version: 4
server: WebpackDevServer4
compiler: Compiler
} | {
version: 4
server: WebpackDevServer
version: 5
server: WebpackDevServer5
compiler: Compiler
}

Expand All @@ -64,34 +64,6 @@ export function devServer (devServerConfig: WebpackDevServerConfig): Promise<Cyp
return new Promise(async (resolve, reject) => {
const result = await devServer.create(devServerConfig) as DevServerCreateResult

// @ts-expect-error
const { port } = result.server?.options

if (result.version === 3) {
const srv = result.server.listen(port || 0, '127.0.0.1', () => {
const port = (srv.address() as AddressInfo).port

debug('Component testing webpack server 3 started on port %s', port)

resolve({
port,
// Close is for unit testing only. We kill this child process which will handle the closing of the server
close: (done) => {
srv.close((err) => {
if (err) {
debug('closing dev server, with error', err)
}

debug('closed dev server')
done?.(err)
})
},
})
})

return
}

result.server.start().then(() => {
if (!result.server.options.port) {
return reject(new Error(`Expected port ${result.server.options.port} to be a number`))
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export interface SourcedWebpackDevServer extends SourcedDependency {
module: {
new (...args: unknown[]): unknown
}
majorVersion: 3 | 4 | 5
majorVersion: 4 | 5
}

export interface SourcedHtmlWebpackPlugin extends SourcedDependency {
Expand Down Expand Up @@ -214,7 +214,7 @@ export function sourceWebpackDevServer (config: WebpackDevServerConfig, webpackM
webpackDevServer.importPath = path.dirname(webpackDevServerJsonPath)
webpackDevServer.packageJson = require(webpackDevServerJsonPath)
webpackDevServer.module = require(webpackDevServer.importPath)
webpackDevServer.majorVersion = getMajorVersion(webpackDevServer.packageJson, [3, 4, 5])
webpackDevServer.majorVersion = getMajorVersion(webpackDevServer.packageJson, [4, 5])

debug('WebpackDevServer: Successfully sourced webpack-dev-server - %o', webpackDevServer)
if (webpackMajorVersion < 5 && webpackDevServer.majorVersion === 5) {
Expand Down
18 changes: 4 additions & 14 deletions npm/webpack-dev-server/src/makeDefaultWebpackConfig.ts
Original file line number Diff line number Diff line change
Expand Up @@ -109,18 +109,6 @@ export function makeCypressWebpackConfig (
}
}

if (webpackDevServerMajorVersion === 5) {
return {
...finalConfig,
devServer: {
port: webpackDevServerPort,
client: {
overlay: false,
},
},
}
}

if (webpackDevServerMajorVersion === 4) {
return {
...finalConfig,
Expand All @@ -133,12 +121,14 @@ export function makeCypressWebpackConfig (
}
}

// @ts-ignore
// default is webpack-dev-server v5
return {
...finalConfig,
devServer: {
port: webpackDevServerPort,
overlay: false,
client: {
overlay: false,
},
},
}
}
28 changes: 3 additions & 25 deletions npm/webpack-dev-server/test/devServer-unit.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,28 +14,6 @@ const cypressConfig = {
describe('devServer', function () {
this.timeout(10 * 1000)

it('creates a new devServer webpack4, webpackDevServer3', async () => {
const { devServer } = proxyquire('../src/devServer', {
'./helpers/sourceRelativeWebpackModules': {
sourceDefaultWebpackDependencies: () => {
return createModuleMatrixResult({
webpack: 4,
webpackDevServer: 3,
})
} },
}) as typeof import('../src/devServer')

const result = await devServer.create({
specs: [],
cypressConfig,
webpackConfig: {},
devServerEvents: new EventEmitter(),
})

expect(result.server).to.be.instanceOf(require('webpack-dev-server-3'))
expect(result.version).to.eq(3)
})

it('creates a new devServer webpack4, webpackDevServer4', async () => {
const { devServer } = proxyquire('../src/devServer', {
'./helpers/sourceRelativeWebpackModules': {
Expand All @@ -54,7 +32,7 @@ describe('devServer', function () {
devServerEvents: new EventEmitter(),
})

expect(result.server).to.be.instanceOf(require('webpack-dev-server'))
expect(result.server).to.be.instanceOf(require('webpack-dev-server-4'))
expect(result.version).to.eq(4)
})

Expand All @@ -76,7 +54,7 @@ describe('devServer', function () {
devServerEvents: new EventEmitter(),
})

expect(result.server).to.be.instanceOf(require('webpack-dev-server'))
expect(result.server).to.be.instanceOf(require('webpack-dev-server-4'))
expect(result.version).to.eq(4)
})

Expand All @@ -98,7 +76,7 @@ describe('devServer', function () {
devServerEvents: new EventEmitter(),
})

expect(result.server).to.be.instanceOf(require('webpack-dev-server-5'))
expect(result.server).to.be.instanceOf(require('webpack-dev-server'))
expect(result.version).to.eq(5)
})
})
19 changes: 0 additions & 19 deletions npm/webpack-dev-server/test/handlers/createReactAppHandler.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,25 +50,6 @@ const expectReactScriptsFiveModifications = (webpackConfig: Configuration) => {
describe('createReactAppHandler', function () {
this.timeout(1000 * 60)

it('sources the config from react-scripts v4', async () => {
const projectRoot = await scaffoldMigrationProject('cra-4')

process.chdir(projectRoot)

const { frameworkConfig: webpackConfig, sourceWebpackModulesResult } = createReactAppHandler({
cypressConfig: { projectRoot } as Cypress.PluginConfigOptions,
framework: 'create-react-app',
} as WebpackDevServerConfig)

expect(webpackConfig.mode).eq('development')
expectEslintModifications(webpackConfig)
expectModuleSourceInPlaceModifications(webpackConfig, projectRoot)
expectBabelRuleModifications(webpackConfig, projectRoot)

expect(sourceWebpackModulesResult.framework?.importPath).to.include('react-scripts')
expect(sourceWebpackModulesResult.webpack.majorVersion).eq(4)
})

it('sources the config from react-scripts v5', async () => {
const projectRoot = await scaffoldMigrationProject('cra-5')

Expand Down
17 changes: 0 additions & 17 deletions npm/webpack-dev-server/test/handlers/vueCliHandler.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,21 +24,4 @@ describe('vueCliHandler', function () {
expect(sourceWebpackModulesResult.framework?.importPath).to.include('@vue/cli-service')
expect(sourceWebpackModulesResult.webpack.majorVersion).eq(5)
})

it('sources from a @vue/cli-service@4.x project with Vue 2', async () => {
const projectRoot = await scaffoldMigrationProject('vuecli4-vue2')

process.chdir(projectRoot)

const { frameworkConfig: webpackConfig, sourceWebpackModulesResult } = await vueCliHandler({
cypressConfig: { projectRoot } as Cypress.PluginConfigOptions,
framework: 'vue-cli',
} as WebpackDevServerConfig)

// Verify it's a Vue-specific webpack config by seeing if VueLoader is present.
expect(webpackConfig.plugins?.find((plug) => plug.constructor.name === 'VueLoader'))

expect(sourceWebpackModulesResult.framework?.importPath).to.include('@vue/cli-service')
expect(sourceWebpackModulesResult.webpack.majorVersion).eq(4)
})
})
Loading

0 comments on commit 1987422

Please sign in to comment.