Merge branch 'develop' into zachw/angular-tweaks

Author: ZachJW34

CONTRIBUTING.md

@@ -289,10 +289,12 @@ Here is a list of the npm packages in this repository:
  | [eslint-plugin-dev](./npm/eslint-plugin-dev)           | `@cypress/eslint-plugin-dev`       | Eslint plugin for internal development.          |
  | [mount-utils](./npm/mount-utils)                       | `@cypress/mount-utils`             | Common functionality for Vue/React/Angular adapters. |
  | [react](./npm/react)                                   | `@cypress/react`                   | Cypress component testing for React.             |
+ | [react18](./npm/react18)                               | `@cypress/react18`                   | Cypress component testing for React 18.           |
  | [vite-dev-server](./npm/vite-dev-server)     | `@cypress/vite-dev-server`    | Vite powered dev server for Component Testing.                  |
  | [webpack-preprocessor](./npm/webpack-preprocessor)     | `@cypress/webpack-preprocessor`    | Cypress preprocessor for bundling JavaScript via webpack.  |
  | [webpack-dev-server](./npm/webpack-dev-server)     | `@cypress/webpack-dev-server`    | Webpack powered dev server for Component Testing.                |
- | [vue](./npm/vue)                                       | `@cypress/vue`                     | Cypress component testing for Vue.               |
+ | [vue](./npm/vue)                                       | `@cypress/vue`                     | Cypress component testing for Vue 3.               |
+ | [vue2](./npm/vue2)                                       | `@cypress/vue2`                     | Cypress component testing for Vue 2.               |
 
 We try to tag all issues with a `pkg/` or `npm/` tag describing the appropriate package the work is required in. For public packages, we use their qualified package name: For example, issues relating to the  webpack preprocessor are tagged under [`npm: @cypress/webpack-preprocessor`](https://github.com/cypress-io/cypress/labels/npm%3A%20%40cypress%2Fwebpack-preprocessor) label and issues related to the `driver` package are tagged with the [`pkg/driver`](https://github.com/cypress-io/cypress/labels/pkg%2Fdriver) label.
 
@@ -513,7 +515,7 @@ The repository is setup with two main (protected) branches.
 - `master` is the code already published, both for the main Cypress app and independent npm packages.
 - `develop` is the current latest "pre-release" code. This branch is set as the default branch, and all pull requests that update the main Cypress binary should be made against this branch.
 
-In general, we want to publish our standalone npm packages continuously as new features are added. Therefore, any pull requests that only change independent `@cypress/` packages in the [`npm`](./npm) directory should be made directly off the `master` branch. We use [`semantic-release`](https://semantic-release.gitbook.io/semantic-release/) to automatically publish these packages to npm when a PR is merged directly into master.
+In general, we want to publish our [standalone npm packages](./npm) continuously as new features are added. Therefore, any pull requests that only change independent `@cypress/` packages in the [`npm`](./npm) directory should be made directly off the `master` branch. We use [`semantic-release`](https://semantic-release.gitbook.io/semantic-release/) to automatically publish these packages to npm when a PR is merged directly into master.
 
 When updating the main Cypress app, pull requests should be made against the `develop` branch. We do not continuously deploy the Cypress binary, so `develop` contains all of the new features and fixes that are staged to go out in the next update of the main Cypress app. In addition, if you make changes to an npm package that can't be published until the binary is also updated, you should make a pull request against the `develop` branch.
 

npm/README.md

@@ -0,0 +1,6 @@
+# npm
+
+This directory contains packages that are both used internally inside the Cypress monorepo [`packages`](../packages) and also published independently on npm under the Cypress organization using the `@cypress` prefix. For example, `vite-dev-server` is published as `@cypress/vite-dev-server`.
+
+These are automatically released based on [Semantic Version](https://semver.org) commit message prefixes (`feat`, `chore` etc). A package is automatically released when changes are merged into master. You can read more about this process in [`CONTRIBUTING`](../CONTRIBUTING.md#committing-code). 
+

npm/react/package.json

@@ -21,7 +21,6 @@
     "@vitejs/plugin-react": "1.3.1",
     "axios": "0.21.2",
     "cypress": "0.0.0-development",
-    "cypress-plugin-snapshots": "1.4.4",
     "prop-types": "15.7.2",
     "react": "16.8.6",
     "react-dom": "16.8.6",
@@ -30,7 +29,7 @@
     "rollup": "^2.38.5",
     "rollup-plugin-typescript2": "^0.29.0",
     "typescript": "^4.2.3",
-    "vite": "2.9.5",
+    "vite": "3.0.3",
     "vite-plugin-require-transform": "1.0.3"
   },
   "peerDependencies": {

npm/react/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "module": "esnext",
     "moduleResolution": "node",
     "lib": [

npm/vite-dev-server/package.json

@@ -18,6 +18,7 @@
     "debug": "4.3.3",
     "find-up": "6.3.0",
     "local-pkg": "0.4.1",
+    "node-html-parser": "5.3.3",
     "pathe": "0.2.0"
   },
   "devDependencies": {
@@ -26,7 +27,7 @@
     "mocha": "^9.2.2",
     "sinon": "^13.0.1",
     "ts-node": "^10.2.1",
-    "vite": "2.9.0-beta.3",
+    "vite": "3.0.3",
     "vite-plugin-inspect": "0.4.3"
   },
   "files": [

npm/vite-dev-server/src/plugins/cypress.ts

@@ -2,6 +2,7 @@ import debugFn from 'debug'
 import { resolve } from 'pathe'
 import type { ModuleNode, Plugin, ViteDevServer } from 'vite'
 import type { Vite } from '../getVite'
+import { parse, HTMLElement } from 'node-html-parser'
 import fs from 'fs'
 
 import type { ViteDevServerConfig } from '../devServer'
@@ -52,21 +53,44 @@ export const Cypress = (
     configResolved (config) {
       base = config.base
     },
-    async transformIndexHtml () {
+    async transformIndexHtml (html) {
+      // it's possibe other plugins have modified the HTML
+      // before we get to. For example vitejs/plugin-react will
+      // add a preamble. We do our best to look at the HTML we
+      // receive and inject it.
+      // For now we just grab any `<script>` tags and inject them to <head>.
+      // We will add more handling as we learn the use cases.
+      const root = parse(html)
+
+      const scriptTagsToInject = root.childNodes.filter((node) => {
+        return node instanceof HTMLElement && node.rawTagName === 'script'
+      })
+
       const indexHtmlPath = resolve(projectRoot, indexHtmlFile)
 
       debug('resolved the indexHtmlPath as', indexHtmlPath, 'from', indexHtmlFile)
-      const indexHtmlContent = await fs.promises.readFile(indexHtmlPath, { encoding: 'utf8' })
+
+      let indexHtmlContent = await fs.promises.readFile(indexHtmlPath, { encoding: 'utf8' })
+
+      // Inject the script tags
+      indexHtmlContent = indexHtmlContent.replace(
+        '<head>',
+        `<head>
+        ${scriptTagsToInject.map((script) => script.toString())}
+      `,
+      )
+
       // find </body> last index
       const endOfBody = indexHtmlContent.lastIndexOf('</body>')
 
       // insert the script in the end of the body
-      return `${indexHtmlContent.substring(0, endOfBody)
-    }<script>
-    ${loader}
-    </script>${
-      indexHtmlContent.substring(endOfBody)
-    }`
+      const newHtml = `
+        ${indexHtmlContent.substring(0, endOfBody)}
+        <script>${loader}</script>
+        ${indexHtmlContent.substring(endOfBody)}
+      `
+
+      return newHtml
     },
     configureServer: async (server: ViteDevServer) => {
       server.middlewares.use(`${base}index.html`, async (req, res) => {

npm/vue/package.json

@@ -31,7 +31,7 @@
     "rollup-plugin-typescript2": "^0.29.0",
     "tailwindcss": "1.1.4",
     "typescript": "^4.2.3",
-    "vite": "2.9.5",
+    "vite": "3.0.3",
     "vue": "3.2.31",
     "vue-i18n": "9.0.0-rc.6",
     "vue-router": "^4.0.0",