feat: embedding mount into the cypress binary (real dependency) #20930

JessicaSachs · 2022-04-05T22:26:47Z

Closes UNIFY-1386

Approach

This PR essentially copies the built libraries from npm/vue, npm/react, and npm/mount-utils and keeps the cli/package.json's exports map up to date.

This avoids making changes to specific dev-servers or relying on specific bundler features like resolve.alias.

Resources

Original (dev-server specific, alias-based approach) spike: UNIFY-1354 consolidating devServer config & client modules #20732
Tech Brief (contains all CT changes) https://github.com/cypress-io/tech-briefs/pull/18

User facing changelog

Cypress users no longer have to install the Vue or React mounting libraries separately when mounting components. If you are using Vue 3 or React, you can remove those dependencies from your package.json entirely and replace the imports to the newly supported cypress/vue and cypress/react namespaces.

For Vue 2 users, a separate pull request will add support for importing mount from cypress/vue-2.

Before: Externally Install Mounting Libs

Mounting libraries are always explicitly imported from the Cypress npm organization namespace.

// React
import { mount } from '@cypress/react'

// Vue 3
import { mount } from '@cypress/vue' // v3.x, pinned in your package.json

// Vue 2
import { mount } from '@cypress/vue' // v2.x, pinned in your package.json

After: Bundling Mounting Libs

Mounting libraries are shipped with Cypress, and are exposed as subpaths form the Cypress namespace. This is done as part of the cli build process.

This API is supported via the cypress package's exports map as defined in the package.json.

// React
import { mount } from 'cypress/react'

// Vue 3
import { mount } from 'cypress/vue'

// Vue 2, still have to npm install the pinned version of @cypress/vue for now
import { mount } from '@cypress/vue'

cypress-bot · 2022-04-05T22:26:49Z

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.

cypress · 2022-04-05T22:50:16Z

Test summary

17812 • 0 • 217 • 0 • 2

Run details


Project	cypress
Status	Passed
Commit	`ca18b0a`
Started	Apr 6, 2022 11:13 PM
Ended	Apr 6, 2022 11:25 PM
Duration	11:55 💡
OS	Linux Debian - 10.10
Browser	Multiple

View run in Cypress Dashboard ➡️

Flakiness

	commands/xhr.cy.js	1
1	... > no status when request isnt forced 404
	cypress/proxy-logging.cy.ts	1
1	Proxy Logging > request logging > xhr log has response body/status code when xhr response is logged second

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

… appropriate paths

…ckage

scripts/sync-exported-npm-with-cli.js

cli/.gitignore

scripts/sync-exported-npm-with-cli.js

JessicaSachs · 2022-04-06T22:47:10Z

It works!!!! Going to remove the circle changes.

…g-mount-with-real-package

tgriesser

Nice! We can probably look into symlinking the dirs for local development in a follow up PR

BlueWinds · 2022-04-06T23:36:09Z

cli/package.json

+      "require": "./react/dist/cypress-react.cjs.js"
+    },
+    "./mount-utils": {
+      "require": "./mount-utils/dist/index.js"


No import entry for mount-utils?

No it wasn't built for ESM.

Because only cypress-react and cypress-vue consume it and they have an esm export it's not (currently) a problem.

We have tech debt to convert all of our npm/* packages to be esm-first and share the same rollup + typescript compilation settings.

lmiller1990

Code seems fine, just have a comment around how we can test this and the end goal (we will migrate to import ... from 'cypress/vue' internally? How do we QA and verify this works (no tests for it so far).

lmiller1990 · 2022-04-06T23:50:09Z

scripts/sync-exported-npm-with-cli.js

+  console.log('Writing to CLI package.json for', exportName)
+
+  fs.writeFileSync(path.join(cliPath, 'package.json'), output, 'utf-8')
+})


The tiniest thing but this seems like pretty important logic to test - do we need some kind of basic test to ensure that the package.json updates correctly, and that import { mount } from 'cypress/vue is actually working? We don't have any coverage for this right now, from what I can see.

I wonder if we can update all internal code to use the deep import syntax in the future. Is this something we plan to do?

We can test it by adding code here cypress-io/cypress-example-kitchensink#528

I'll do that. It'll break all other pipelines until this is merged, maybe I'll create a new branch for it (in kitchensink).

I was also wondering if we can convert a couple of the existing system tests to import { mount } from 'cypress/vue' rather than import { mount } from '@cypress/vue'.

Oh, here https://github.com/cypress-io/cypress-example-kitchensink/pull/547/files

That probably only works in test-binary, where we have tests that run in a docker container against the compiled binary. But still worth looking into. Just an extremely simple 'can import' test there.

Yeah in general I feel uncomfortable that we don't have a lot of post-build infrastructure for testing the output of Circle CI's build scripts. The kitchen sink is the right place. I put a PR up above that will at least fail if those packages aren't declared in the exports map.

BlueWinds · 2022-04-06T23:51:20Z

cli/scripts/start-build.js

@@ -22,6 +22,10 @@ includeTypes.forEach((folder) => {
  shell.cp('-R', source, 'build/types')
 })

+// TODO: Add a typescript or rollup build step


Is there a github issue for this we can link? Have been trying to do TODO: blah, https://github.com/blahblah.

There isn't right now.

BlueWinds · 2022-04-07T00:03:22Z

Looks good to me. I'd love to see a binary system test to cover this, but if you want to hold off for a separate PR on that, I'll approve this one as-is.

trying to run a binary with import cypress/vue

a521e23

JessicaSachs changed the title ~~feat: embedding mount into the cypress binary~~ feat: embedding mount into the cypress binary (real dependency) Apr 5, 2022

swapping to file:../ logic

cbbfeb0

JessicaSachs added 7 commits April 5, 2022 21:21

Adding automation to sync npm packages with cypress cli package

82d0612

Solving modules that don't have esm exports

0ed39a2

fixing lint issues for copied dist'd files

d2ad51e

Explicitly include gitignored files when publishing to npm

93a6ad1

ensure that .gitignore and .npmignore properly ignore and publish the…

4cb6e86

… appropriate paths

cleaning up .npmignore and .gitignore

a27b22f

avoiding race condition and figuring out how build/* works for cli pa…

d78b326

…ckage

JessicaSachs mentioned this pull request Apr 6, 2022

feat: bundling react, vue, and mount-utils with cypress binary #20856

Closed

JessicaSachs commented Apr 6, 2022

View reviewed changes

scripts/sync-exported-npm-with-cli.js Outdated Show resolved Hide resolved

Update scripts/sync-exported-npm-with-cli.js

5ef22fa

JessicaSachs commented Apr 6, 2022

View reviewed changes

cli/.gitignore Outdated Show resolved Hide resolved

Update cli/.gitignore

4d49004

JessicaSachs commented Apr 6, 2022

View reviewed changes

scripts/sync-exported-npm-with-cli.js Outdated Show resolved Hide resolved

JessicaSachs added 3 commits April 6, 2022 17:07

Update scripts/sync-exported-npm-with-cli.js

69325f4

build ordering

30e2a8d

Re-execute post-build.js because circle cleans everything up

c036fca

JessicaSachs added 2 commits April 6, 2022 19:06

cleaning up the circle config

0dfe5ae

Merge remote-tracking branch 'origin/10.0-release' into feat/embeddin…

ca18b0a

…g-mount-with-real-package

JessicaSachs marked this pull request as ready for review April 6, 2022 23:07

JessicaSachs requested review from a team as code owners April 6, 2022 23:07

JessicaSachs requested review from jennifer-shehane and tgriesser and removed request for a team April 6, 2022 23:07

JessicaSachs requested review from BlueWinds, lmiller1990 and ZachJW34 April 6, 2022 23:19

tgriesser approved these changes Apr 6, 2022

View reviewed changes

BlueWinds reviewed Apr 6, 2022

View reviewed changes

lmiller1990 reviewed Apr 6, 2022

View reviewed changes

BlueWinds reviewed Apr 6, 2022

View reviewed changes

JessicaSachs mentioned this pull request Apr 6, 2022

feat: adding deep imports for react, vue, and mount-utils cypress-io/cypress-example-kitchensink#547

Closed

BlueWinds approved these changes Apr 7, 2022

View reviewed changes

JessicaSachs merged commit 3fe5f50 into 10.0-release Apr 7, 2022

JessicaSachs deleted the feat/embedding-mount-with-real-package branch April 7, 2022 00:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: embedding mount into the cypress binary (real dependency) #20930

feat: embedding mount into the cypress binary (real dependency) #20930

JessicaSachs commented Apr 5, 2022 •

edited

cypress-bot bot commented Apr 5, 2022

cypress bot commented Apr 5, 2022 •

edited

JessicaSachs commented Apr 6, 2022

tgriesser left a comment

BlueWinds Apr 6, 2022

JessicaSachs Apr 6, 2022 •

edited

lmiller1990 left a comment

lmiller1990 Apr 6, 2022

lmiller1990 Apr 6, 2022

BlueWinds Apr 6, 2022

JessicaSachs Apr 6, 2022

BlueWinds Apr 6, 2022

JessicaSachs Apr 7, 2022

BlueWinds Apr 6, 2022

JessicaSachs Apr 7, 2022

BlueWinds commented Apr 7, 2022

feat: embedding mount into the cypress binary (real dependency) #20930

feat: embedding mount into the cypress binary (real dependency) #20930

Conversation

JessicaSachs commented Apr 5, 2022 • edited

Approach

Resources

User facing changelog

Before: Externally Install Mounting Libs

After: Bundling Mounting Libs

cypress-bot bot commented Apr 5, 2022

cypress bot commented Apr 5, 2022 • edited

Test summary

Run details

Flakiness

JessicaSachs commented Apr 6, 2022

tgriesser left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JessicaSachs Apr 6, 2022 • edited

Choose a reason for hiding this comment

lmiller1990 left a 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

BlueWinds commented Apr 7, 2022

JessicaSachs commented Apr 5, 2022 •

edited

cypress bot commented Apr 5, 2022 •

edited

JessicaSachs Apr 6, 2022 •

edited