Merge remote-tracking branch 'origin/10.0-release' into lmiller1990/UNIFY-1402

Author: lmiller1990

.eslintignore

@@ -37,6 +37,11 @@ system-tests/projects/config-with-ts-syntax-error/**
 # cli/types is linted by tslint/dtslint
 cli/types
 
+# cli/react, cli/vue, and cli/mount-utils are all copied from dist'd builds
+cli/react
+cli/vue
+cli/mount-utils
+
 # packages/example is not linted (think about changing this)
 packages/example
 

browser-versions.json

@@ -1,4 +1,4 @@
 {
-  "chrome:beta": "100.0.4896.60",
-  "chrome:stable": "100.0.4896.60"
+  "chrome:beta": "101.0.4951.15",
+  "chrome:stable": "100.0.4896.75"
 }

circle.yml

@@ -29,7 +29,7 @@ mainBuildFilters: &mainBuildFilters
       only:
         - develop
         - 10.0-release
-        - 10.0-use-contexts
+        - marktnoonan/merg-develop-2022-4-5
 
 # usually we don't build Mac app - it takes a long time
 # but sometimes we want to really confirm we are doing the right thing
@@ -39,7 +39,7 @@ macWorkflowFilters: &mac-workflow-filters
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
     - equal: [ '10.0-release', << pipeline.git.branch >> ]
-    - equal: [ 10.0-use-contexts, << pipeline.git.branch >> ]
+    - equal: [ marktnoonan/merg-develop-2022-4-5, << pipeline.git.branch >> ]
     - matches:
           pattern: "-release$"
           value: << pipeline.git.branch >>
@@ -49,7 +49,7 @@ windowsWorkflowFilters: &windows-workflow-filters
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
     - equal: [ '10.0-release', << pipeline.git.branch >> ]
-    - equal: [ 10.0-use-contexts, << pipeline.git.branch >> ]
+    - equal: [ marktnoonan/merg-develop-2022-4-5, << pipeline.git.branch >> ]
     - matches:
           pattern: "-release$"
           value: << pipeline.git.branch >>
@@ -948,9 +948,16 @@ commands:
       - run:
           name: Build NPM package
           command: yarn build --scope cypress
+      - run:
+          name: Copy Re-exported NPM Packages
+          command: node ./scripts/post-build.js
+          working_directory: cli
       - run:
           command: ls -la types
           working_directory: cli/build
+      - run:
+          command: ls -la vue mount-utils react
+          working_directory: cli/build
       - unless:
           condition:
             equal: [ *windows-executor, << parameters.executor >> ]
@@ -1704,7 +1711,7 @@ jobs:
       - run:
           name: Check current branch to persist artifacts
           command: |
-            if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "10.0-use-contexts" && "$CIRCLE_BRANCH" != "10.0-release" ]]; then
+            if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "marktnoonan/merg-develop-2022-4-5" && "$CIRCLE_BRANCH" != "10.0-release" ]]; then
               echo "Not uploading artifacts or posting install comment for this branch."
               circleci-agent step halt
             fi

cli/.gitignore

@@ -12,3 +12,9 @@ types/sinon-chai
 types/net-stubbing.ts
 # ignore CLI output build folder
 build
+
+# ignore packages synced at build-time via
+# the sync-exported-npm-with-cli.js script
+vue
+react
+mount-utils

cli/README.md

@@ -60,6 +60,47 @@ yarn add ~/{your-dirs}/cypress/cli/build/cypress-3.3.1.tgz --ignore-scripts
 
 Which installs the `tgz` file we have just built from folder `Users/jane-lane/{your-dirs}/cypress/cli/build`.
 
+#### Sub-package API
+
+> How do deep imports from cypress/* get resolved?
+
+The cypress npm package comes pre-assembled with mounting libraries for major front-end frameworks. These mounting libraries are the first examples of Cypress providing re-exported sub-packages. These sub-packages follow the same naming convention they do when they're published on **npm**, but without a leading **`@`** sign. For example:
+
+##### An example of a sub-package: @cypress/vue, @cypress/react, @cypress/mount-utils
+
+**Let's discuss the Vue mounting library that Cypress ships.**
+
+If you'd installed the `@cypress/vue` package from NPM, you could write the following code.
+
+This would be necessary when trying to use a version of Vue, React, or other library that may be newer or older than the current version of cypress itself.
+
+```js
+import { mount } from '@cypress/vue'
+```
+
+Now, with the sub-package API, you're able to import the latest APIs directly from Cypress without needing to install a separate dependency.
+
+```js
+import { mount } from 'cypress/vue'
+```
+
+The only difference is the import name, and if you still need to use a specific version of one of our external sub-packages, you may install it and import it directly.
+
+##### Adding a new sub-package
+
+There are a few steps when adding a new sub-package.
+
+1. Make sure the sub-package's rollup build is _self-contained_ or that any dependencies are also declared in the CLI's **`package.json`**.
+2. Now, in the **`postbuild`** script for the sub-package you'd like to embed, invoke `node ./scripts/sync-exported-npm-with-cli.js` (relative to the sub-package, see **`npm/vue`** for an example).
+3. Add the sub-package's name to the following locations:
+  - **`cli/.gitignore`**
+  - **`cli/scripts/post-build.js`**
+  - **`.eslintignore`** (under cli/sub-package)
+4. DO NOT manually update the **package.json** file. Running `yarn build` will automate this process.
+5. Commit the changed files.
+
+[Here is an example Pull Request](https://github.com/cypress-io/cypress/pull/20930/files#diff-21b1fe66043572c76c549a4fc5f186e9a69c330b186fc91116b9b70a4d047902)
+
 #### Module API
 
 The module API can be tested locally using something like:

cli/package.json

@@ -103,7 +103,10 @@
     "index.js",
     "index.mjs",
     "types/**/*.d.ts",
-    "types/net-stubbing.ts"
+    "types/net-stubbing.ts",
+    "mount-utils",
+    "vue",
+    "react"
   ],
   "bin": {
     "cypress": "bin/cypress"
@@ -117,9 +120,20 @@
       "import": "./index.mjs",
       "require": "./index.js"
     },
+    "./vue": {
+      "import": "./vue/dist/cypress-vue.esm-bundler.js",
+      "require": "./vue/dist/cypress-vue.cjs.js"
+    },
     "./package.json": {
       "import": "./package.json",
       "require": "./package.json"
+    },
+    "./react": {
+      "import": "./react/dist/cypress-react.esm-bundler.js",
+      "require": "./react/dist/cypress-react.cjs.js"
+    },
+    "./mount-utils": {
+      "require": "./mount-utils/dist/index.js"
     }
   }
 }

cli/scripts/post-build.js

@@ -0,0 +1,21 @@
+const shell = require('shelljs')
+const { resolve } = require('path')
+
+shell.set('-v') // verbose
+shell.set('-e') // any error is fatal
+
+// For each npm package that is re-published via cypress/*
+// make sure that it is also copied into the build directory
+const npmModulesToCopy = [
+  'mount-utils',
+  'react',
+  'vue',
+]
+
+npmModulesToCopy.forEach((folder) => {
+  // cli/mount-utils => cli/build/mount-utils
+  const from = resolve(`${__dirname}/../${folder}`)
+  const to = resolve(`${__dirname}/../build/${folder}`)
+
+  shell.cp('-R', from, to)
+})

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
+// The only reason start-build.js exists
+// is because the cli package does not have an actual
+// build process to compile index.js and lib
 shell.exec('babel lib -d build/lib')
 shell.exec('babel index.js -o build/index.js')
 shell.cp('index.mjs', 'build/index.mjs')

cli/types/cypress.d.ts

@@ -2341,7 +2341,7 @@ declare namespace Cypress {
   type Agent<T extends sinon.SinonSpy> = SinonSpyAgent<T> & T
 
   interface CookieDefaults {
-    preserve: string | string[] | RegExp | ((cookie: any) => boolean)
+    preserve: string | string[] | RegExp | ((cookie: Cookie) => boolean)
   }
 
   interface Failable {

npm/mount-utils/package.json

@@ -5,7 +5,8 @@
   "main": "dist/index.js",
   "scripts": {
     "build": "tsc || echo 'built, with type errors'",
-    "build-prod": "tsc || echo 'built, with type errors'",
+    "postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
+    "build-prod": "yarn build",
     "check-ts": "tsc --noEmit",
     "watch": "tsc -w"
   },