feat: add new webpack-dev-server package based on object API & bundling #20861

tgriesser · 2022-03-31T01:02:44Z

Closes UNIFY-1267

User facing changelog

Adds support for the new object syntax for the webpack-dev-server. Adds a new webpack-dev-server-fresh package to manage this support, it will replace the existing webpack-dev-server once all frameworks are supported.

Ported unit tests from webpack-dev-server, and added additional unit tests covering new functionality. Adds "open mode" tests for the matrix of supported webpack / webpack-dev-server versions, including recovering from failures, and adds system-tests.

Adds the following system test improvements:

Adds the concept of project-fixtures for better testing the same project against multiple dependency versions documentation added here
For open-mode system tests, automatically tries updating the yarn.lock in the project directory if the --frozen-lockfile install fails, and then rm node_modules in the project directory, and retry once, so you just have to bump the package.json version and it'll work without needing to do all that manually: link (will update to use fs.remove)

Also marked the webpack-dev-server-fresh package.json with internal: true for now to ensure it doesn't accidentally get published.

PR Tasks

Have tests been added/updated?
Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
N/A Has a PR for user-facing changes been opened in cypress-documentation?
Have API changes been updated in the type definitions?
N/A Have new configuration options been added to the cypress.schema.json?

cypress-bot · 2022-03-31T01:02:46Z

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.

* 10.0-release: fix: add index.mjs to the published files of cli (#20884) refactor: lift indexHtmlFile up to component, add validation (#20870) fix: allow migration of pluginsFile using `env` properties (#20770) fix: viewport from CLI on CT (#20849) fix: git data source unit test failure (#20875) fix: Ensuring current browser is synchronized between app and launchpad (#20830) Fix missed await on merge conflict resolution test(unification): move record keys to contexts (#20860) test: move record keys to contexts (#20859) make alerts more responsive chore: Update Chrome (stable) to 100.0.4896.60 (#20841) Revise test. fix: cy.root respect timeout option. fix(deps): update dependency ansi-regex to v4.1.1 [security] (#20836) chore(deps): update dependency ansi-regex to 4.1.1 [security] (#20807) chore: Refactor cri-client to use async/await (#20825) remove automationId from runnerStore fix firefox automation and adress feedback feat: add automation warning/disconnected states in app

tgriesser · 2022-04-01T15:51:04Z

npm/webpack-dev-server-fresh/src/helpers/sourceRelativeWebpackModules.ts

+ *
+ * @internal
+ */
+export function sourceRelativeWebpackModules (config: WebpackDevServerConfig) {


This is new functionality, it ensures we're resolving the webpack/webpack-dev-server/ html-webpack-plugin relative to the project root, for better compat with the user's webpack config.

We do something similar in the launchpad when we do the initial setup and find your deps, see here, using resolve-from.

Would resolve-from be a candidate for finding the nearest module here, or is this a bit too custom/different?

It looks like resolve-from is providing behavior that is now provided in Node's require.resolve with the paths option: sindresorhus/resolve-from#8 since v8.7

I think most other places in the codebase where we do scoped requires, we utilize this pattern, rather than depending on a package, so I'd lead toward explicitness here.

Oh. Maybe we should not bother with resolve-from and just use require.resolve in the other places, too.

tgriesser · 2022-04-01T15:51:57Z

packages/frontend-shared/cypress/e2e/support/e2eSupport.ts

@@ -174,7 +175,7 @@ beforeEach(() => {
  taskInternal('__internal__beforeEach', undefined)
 })

-function scaffoldProject (projectName: ProjectFixture, options: { timeout?: number} = {}) {
+function scaffoldProject (projectName: ProjectFixture, options: { timeout?: number } = { timeout: SIXTY_SECONDS }) {


Bumped this due to the yarn occasionally taking a bit longer than 10 seconds.

tgriesser · 2022-04-01T15:54:19Z

system-tests/lib/fixtures.ts

+    const packageJson = require(`${to}/package.json`)
+    const fixtureDir = packageJson.projectFixtureDirectory
+
+    if (fixtureDir) {
+      if (!projectFixtureDirs.includes(fixtureDir)) {
+        throw new Error(`Invalid project fixture directory: ${fixtureDir}, expected one of ${projectFixtureDirs}`)
+      }
+
+      await fs.copy(_path.join(projectFixtures, fixtureDir), to)
+    }


Implementation of the new projectFixtureDirectory feature

Fixtures will be an awesome feature for our system tests 💯

tgriesser · 2022-04-01T15:55:26Z

npm/webpack-dev-server-fresh/cypress/e2e/react.cy.ts

+      cy.withCtx(async (ctx) => {
+        await ctx.actions.file.writeFileInProject(`src/MissingReact.jsx`,
+        `import React from 'react';
+        ${await ctx.actions.file.readFileInProject('src/MissingReact.jsx')}`)
+      })


Tests in open mode that the webpack-dev-server is able to auto-refresh when we fix issues in the user code.

New infra 💯

I think this is a good one to demo next biweekly demo - if we don't show this stuff off and champion it, most people won't know. I think a lot of people are not using system-tests in the most productive way for this reason.

tgriesser · 2022-04-01T15:55:47Z

npm/webpack-dev-server-fresh/cypress/e2e/react.cy.ts

+      cy.contains('MissingReactInSpec.cy.jsx').click()
+      cy.get('.failed > .num').should('contain', 1)
+      cy.withCtx(async (ctx) => {
+        await ctx.actions.file.writeFileInProject(`src/MissingReactInSpec.cy.jsx`,
+          await ctx.actions.file.readFileInProject('src/App.cy.jsx'))
+      })


Tests in open mode that the webpack-dev-server is able to auto-refresh when we fix issues in the spec.

packages/frontend-shared/cypress/e2e/e2ePluginSetup.ts

packages/config/src/options.ts

tgriesser · 2022-04-01T16:25:00Z

packages/driver/src/cypress/stack_utils.ts

@@ -12,7 +12,7 @@ import { getStackLines, replacedStack, stackWithoutMessage, splitStack, unsplitS

 const whitespaceRegex = /^(\s*)*/
 const stackLineRegex = /^\s*(at )?.*@?\(?.*\:\d+\:\d+\)?$/
-const customProtocolRegex = /^[^:\/]+:\/+/
+const customProtocolRegex = /^[^:\/]+:\/{1,3}/


Will open a separate PR for this

lmiller1990

I was not able to attend the sync w/ @tgriesser and @ZachJW34 but seems like everything is 👌 , none of my comments are blockers.

Let's get this ✔️ and resolve conflicts and merged 💯

ZachJW34

Once were green LGTM!

* 10.0-release: chore: remove dependency-tree dep (#20905)

tgriesser added 3 commits March 30, 2022 20:52

adding types to support new devServer contract

66dcf80

initial commit, webpack-dev-server-fresh package

b115c4f

wip cypress tests for webpack-dev-server-fresh

d512f68

tgriesser added 2 commits March 30, 2022 21:40

Passing e2e open mode test

24456d4

Examples working for webpack/wds versions

7187cf7

ZachJW34 mentioned this pull request Mar 31, 2022

refactor: lift indexHtmlFile up to component, add validation #20870

Merged

2 tasks

tgriesser added 2 commits March 31, 2022 13:03

new convention for system testing via project-fixtures directory

7f83ff8

cleaning up some of the devServer

35be22c

jennifer-shehane assigned tgriesser Apr 1, 2022

tgriesser added 3 commits April 1, 2022 11:43

Fixing up tests, types, add system tests

223b1ea

change import

5377d71

tgriesser commented Apr 1, 2022

View reviewed changes

tgriesser marked this pull request as ready for review April 1, 2022 16:02

tgriesser requested review from a team as code owners April 1, 2022 16:02

tgriesser requested review from jennifer-shehane, flotwig, JessicaSachs, ZachJW34 and tbiethman and removed request for a team April 1, 2022 16:02

jennifer-shehane removed their request for review April 1, 2022 16:03

tgriesser commented Apr 1, 2022

View reviewed changes

packages/config/src/options.ts Outdated Show resolved Hide resolved

tgriesser commented Apr 1, 2022

View reviewed changes

tgriesser added 4 commits April 1, 2022 14:42

fixes for CI failures / CI workflow

ef3c223

Fix

17416d3

minor cleanup

bfe2ad4

Add fixture to ct project

1f0ed9c

tgriesser requested a review from tbiethman April 4, 2022 23:14

tbiethman previously approved these changes Apr 4, 2022

View reviewed changes

lmiller1990 previously approved these changes Apr 4, 2022

View reviewed changes

Merge branch '10.0-release' into tgriesser/feat/UNIFY-1267

cca7a16

tgriesser dismissed stale reviews from lmiller1990, tbiethman, and ZachJW34 via cca7a16 April 4, 2022 23:51

tgriesser requested review from tbiethman, ZachJW34 and lmiller1990 April 5, 2022 00:02

ZachJW34 previously approved these changes Apr 5, 2022

View reviewed changes

tgriesser added 2 commits April 5, 2022 10:08

fix types

a63206e

Merge branch '10.0-release' into tgriesser/feat/UNIFY-1267

0cf09cc

* 10.0-release: chore: remove dependency-tree dep (#20905)

tgriesser dismissed ZachJW34’s stale review via 0cf09cc April 5, 2022 14:09

tgriesser requested a review from ZachJW34 April 5, 2022 14:28

ZachJW34 previously approved these changes Apr 5, 2022

View reviewed changes

tbiethman previously approved these changes Apr 5, 2022

View reviewed changes

dependency + test fixes

fe7a28d

tgriesser dismissed stale reviews from tbiethman and ZachJW34 via fe7a28d April 5, 2022 15:16

Merge branch '10.0-release' into tgriesser/feat/UNIFY-1267

01f9a06

flotwig requested review from tbiethman, ZachJW34 and BlueWinds and removed request for flotwig April 5, 2022 15:32

tbiethman approved these changes Apr 5, 2022

View reviewed changes

ZachJW34 approved these changes Apr 5, 2022

View reviewed changes

tgriesser merged commit e1da852 into 10.0-release Apr 5, 2022

tgriesser deleted the tgriesser/feat/UNIFY-1267 branch April 5, 2022 16:05

sync-by-unito bot mentioned this pull request May 31, 2022

Release: Ensure we are publishing the correct versions of CT related npm packages for upcoming 10.0 release #21944

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add new webpack-dev-server package based on object API & bundling #20861

feat: add new webpack-dev-server package based on object API & bundling #20861

tgriesser commented Mar 31, 2022 •

edited

cypress-bot bot commented Mar 31, 2022

tgriesser Apr 1, 2022

lmiller1990 Apr 4, 2022

tgriesser Apr 4, 2022

lmiller1990 Apr 4, 2022

tgriesser Apr 1, 2022

tgriesser Apr 1, 2022

tbiethman Apr 4, 2022

tgriesser Apr 1, 2022

lmiller1990 Apr 4, 2022

tgriesser Apr 1, 2022

tgriesser Apr 1, 2022

tgriesser Apr 1, 2022

lmiller1990 left a comment

ZachJW34 left a comment

feat: add new webpack-dev-server package based on object API & bundling #20861

feat: add new webpack-dev-server package based on object API & bundling #20861

Conversation

tgriesser commented Mar 31, 2022 • edited

User facing changelog

PR Tasks

cypress-bot bot commented Mar 31, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lmiller1990 left a comment

Choose a reason for hiding this comment

ZachJW34 left a comment

Choose a reason for hiding this comment

tgriesser commented Mar 31, 2022 •

edited