chore: deliver npm modules (#15398)

* fix: deliver webpack-dev-server new architecture

* fix: make vite-dev-server work

* fix: deliver react and vite-dev-server

* fix: deliver the vue2 package too

* fix: rollback react changes published to next

npm/vite-dev-server/cypress/components/Foo.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export const Foo: React.FC = () => {
+  return <div>Hello world!!!!</div>
+}

npm/vite-dev-server/cypress/components/react-no-jsx.spec.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { mount } from '@cypress/react'
+
+const Comp = () => {
+  return <div>Hello world!</div>
+}
+
+describe('React', () => {
+  it('renders a react component', () => {
+    mount(<Comp />)
+    cy.get('div').contains('Hello world')
+  })
+})

npm/vite-dev-server/cypress/components/react-no-jsx.spec.ts

@@ -0,0 +1,13 @@
+import React from 'react'
+import { mount } from '@cypress/react'
+
+const Comp = () => {
+  return React.createElement('div', {}, 'Hello world')
+}
+
+describe('React', () => {
+  it('renders a react component', () => {
+    mount(React.createElement(Comp))
+    cy.get('div').contains('Hello world')
+  })
+})

npm/vite-dev-server/cypress/components/react-no-jsx.spec.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { mount } from '@cypress/react'
+import { Foo } from './Foo'
+
+describe('React', () => {
+  it('renders a react component #1', () => {
+    mount(<Foo />)
+    cy.get('div').contains('Hello world')
+  })
+
+  it('renders a react component #2', () => {
+    mount(<Foo />)
+    cy.get('div').contains('Hello world')
+  })
+
+  it('renders a react component #3', () => {
+    mount(<Foo />)
+    cy.get('div').contains('Hello world')
+  })
+
+  it('renders a react component #4', () => {
+    mount(<Foo />)
+    cy.get('div').contains('Hello world')
+  })
+})

npm/vite-dev-server/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

npm/vite-dev-server/cypress/plugins.js

@@ -1,9 +1,7 @@
 import { startDevServer } from '@cypress/vite-dev-server'
 
 module.exports = (on, config) => {
-  on('dev-server:start', async (options) => {
-    return startDevServer({ options })
-  })
+  on('dev-server:start', async (options) => startDevServer({ options }))
 
   return config
 }

npm/vite-dev-server/index-template.html

@@ -24,7 +24,27 @@
       return node
     }
 
-      let importsToLoad = [() => import("{{{specPath}}}")];
+    const specPath = "{{{specPath}}}"
+
+      let importsToLoad = [() => import(specPath).catch(e => {
+        // if the import failed, it might be because of dependencies 
+        // so we try a quick refresh just in case it is
+
+        // Since vite does not work with IE we can use URLSearchParams without polyfill
+        const searchParams = new URLSearchParams(window.location.search);
+        const r = searchParams.has("refresh") ? parseInt(searchParams.get("refresh"), 10) + 1 : 0 
+        // limit the number of refresh (dependency discovery depths) 
+        // to 2 instead of 1 for React-DOM
+        if (r < 2) {
+          searchParams.set('refresh', r)
+          window.location.search = searchParams
+        } else {
+          throw new Error(`
+      **Error during compilation.**
+ Check the terminal log for more info
+`, e)
+       }
+      })];
       if ("{{{supportPath}}}") {
         importsToLoad.push(() => import("{{{supportPath}}}"));
       }
@@ -38,7 +58,7 @@
       Cypress.onSpecWindow(window, importsToLoad)
       Cypress.action('app:window:before:load', window)
 
-      beforeEach(() => {
+      before(() => {
         const root = appendTargetIfNotExists('__cy_root')
 
         root.appendChild(appendTargetIfNotExists('__cy_app'))

npm/vite-dev-server/package.json

@@ -17,13 +17,14 @@
   },
   "devDependencies": {
     "@types/mustache": "4.1.1",
-    "vite": "2.0.1"
+    "vite": "2.0.5"
   },
   "peerDependencies": {
     "vite": ">= 2"
   },
   "files": [
-    "dist"
+    "dist",
+    "index-template.html"
   ],
   "license": "MIT",
   "repository": {
@@ -34,5 +35,8 @@
   "bugs": "https://github.com/cypress-io/cypress/issues/new?template=1-bug-report.md",
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "ciJobs": [
+    "npm-vite-dev-server"
+  ]
 }

npm/vite-dev-server/src/makeCypressPlugin.ts

@@ -29,7 +29,6 @@ export const makeCypressPlugin = (
       server.middlewares.use('/index.html', (req, res) => handleIndex(indexHtml, projectRoot, supportFilePath, req, res))
     },
     handleHotUpdate: () => {
-      console.log('HOT UPDATE')
       devServerEvents.emit('dev-server:compile:success')
 
       return []

npm/vue/.gitignore

@@ -0,0 +1 @@
+cypress/videos

npm/vue/examples/cli-ts/package.json

@@ -4,8 +4,8 @@
   "private": true,
   "scripts": {
     "build": "vue-cli-service build",
-    "cy:open": "../../node_modules/.bin/cypress open",
-    "cy:run": "../../node_modules/.bin/cypress run",
+    "cy:open": "node ../../../../scripts/cypress open",
+    "cy:run": "node ../../../../scripts/cypress run",
     "serve": "vue-cli-service serve"
   },
   "dependencies": {

npm/vue/package.json

@@ -2,26 +2,28 @@
   "name": "@cypress/vue",
   "version": "0.0.0-development",
   "description": "Browser-based Component Testing for Vue.js with Cypress.io ✌️🌲",
-  "main": "dist/index.js",
+  "main": "dist/cypress-vue.cjs.js",
   "scripts": {
-    "build": "tsc",
+    "build": "rimraf dist && yarn rollup -c rollup.config.js",
     "build-prod": "yarn build",
     "cy:open": "node ../../scripts/cypress.js open-ct --project ${PWD}",
     "cy:run": "node ../../scripts/cypress.js run-ct --project ${PWD}",
     "test": "yarn cy:run",
-    "watch": "tsc -w"
+    "watch": "yarn build --watch --watch.exclude ./dist/**/*"
   },
   "dependencies": {
-    "@cypress/code-coverage": "3.8.1",
-    "@cypress/webpack-dev-server": "0.0.0-development",
     "@vue/test-utils": "1.0.3",
     "unfetch": "4.1.0"
   },
   "devDependencies": {
     "@babel/core": "7.9.0",
     "@babel/plugin-transform-modules-commonjs": "7.10.4",
     "@babel/preset-env": "7.9.5",
+    "@cypress/code-coverage": "3.8.1",
+    "@cypress/webpack-dev-server": "0.0.0-development",
     "@intlify/vue-i18n-loader": "1.0.0",
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@rollup/plugin-node-resolve": "^11.1.1",
     "@vue/cli-plugin-babel": "~4.4.0",
     "@vue/cli-service": "~4.4.0",
     "axios": "0.19.2",
@@ -33,6 +35,9 @@
     "eslint-plugin-vue": "^6.2.2",
     "find-webpack": "2.1.0",
     "mocha": "7.1.1",
+    "rollup": "^2.38.5",
+    "rollup-plugin-istanbul": "2.0.1",
+    "rollup-plugin-typescript2": "^0.29.0",
     "tailwindcss": "1.1.4",
     "typescript": "3.9.6",
     "vue": "2.6.11",
@@ -45,12 +50,14 @@
     "webpack": "4.42.0"
   },
   "peerDependencies": {
+    "@cypress/webpack-dev-server": "*",
     "babel-loader": "8",
     "cypress": ">=4.5.0",
     "vue": "2.x"
   },
   "files": [
-    "dist/**/*"
+    "dist/**/*",
+    "src/**/*.js"
   ],
   "engines": {
     "node": ">=8"
@@ -68,6 +75,13 @@
     "cypress",
     "vue"
   ],
+  "unpkg": "dist/cypress-vue.browser.js",
+  "module": "dist/cypress-vue.esm-bundler.js",
+  "peerDependenciesMeta": {
+    "@cypress/webpack-dev-server": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public",
     "registry": "http://registry.npmjs.org/"

npm/vue/rollup.config.js

@@ -0,0 +1,86 @@
+import ts from 'rollup-plugin-typescript2'
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+
+import pkg from './package.json'
+
+const banner = `
+/**
+ * ${pkg.name} v${pkg.version}
+ * (c) ${new Date().getFullYear()} Cypress.io
+ * Released under the MIT License
+ */
+`
+
+function createEntry (options) {
+  const {
+    format,
+    input,
+    isBrowser,
+  } = options
+
+  const config = {
+    input,
+    external: [
+      'vue',
+      '@vue/test-utils',
+      '@cypress/webpack-dev-server',
+    ],
+    plugins: [
+      resolve({ preferBuiltins: true }), commonjs(),
+    ],
+    output: {
+      banner,
+      name: 'CypressVue',
+      file: pkg.unpkg,
+      format,
+      globals: {
+        vue: 'Vue',
+        '@vue/test-utils': 'VueTestUtils',
+      },
+      exports: 'auto',
+    },
+  }
+
+  if (input === 'src/index.ts') {
+    if (format === 'es') {
+      config.output.file = pkg.module
+      if (isBrowser) {
+        config.output.file = pkg.unpkg
+      }
+    }
+
+    if (format === 'cjs') {
+      config.output.file = pkg.main
+    }
+  } else {
+    config.output.file = input.replace(/^src\//, 'dist/')
+  }
+
+  console.log(`Building ${format}: ${config.output.file}`)
+
+  config.plugins.push(
+    ts({
+      check: format === 'es' && isBrowser,
+      tsconfigOverride: {
+        compilerOptions: {
+          declaration: format === 'es',
+          target: 'es5', // not sure what this should be?
+          module: format === 'cjs' ? 'es2015' : 'esnext',
+        },
+        exclude: ['tests'],
+      },
+    }),
+  )
+
+  return config
+}
+
+export default [
+  createEntry({ format: 'es', input: 'src/index.ts', isBrowser: false }),
+  createEntry({ format: 'es', input: 'src/index.ts', isBrowser: true }),
+  createEntry({ format: 'iife', input: 'src/index.ts', isBrowser: true }),
+  createEntry({ format: 'cjs', input: 'src/index.ts', isBrowser: false }),
+  createEntry({ format: 'cjs', input: 'src/support.js', isBrowser: false }),
+  createEntry({ format: 'cjs', input: 'src/plugins/webpack/index.js', isBrowser: false }),
+]

npm/vue/src/index.ts

@@ -6,6 +6,7 @@ import {
   VueTestUtilsConfigOptions,
   Wrapper,
 } from '@vue/test-utils'
+import { renderTestingPlatform, ROOT_ID } from './renderTestingPlatform'
 
 const defaultOptions: (keyof MountOptions)[] = [
   'vue',
@@ -357,15 +358,11 @@ export const mount = (
     const document: Document = cy.state('document')
 
     document.body.innerHTML = ''
-    let el = document.getElementById('cypress-jsdom')
+    let el = document.getElementById(ROOT_ID)
 
     // If the target div doesn't exist, create it
     if (!el) {
-      const div = document.createElement('div')
-
-      div.id = 'cypress-jsdom'
-      document.body.appendChild(div)
-      el = div
+      el = renderTestingPlatform(document.head.innerHTML)
     }
 
     if (typeof options.stylesheets === 'string') {

npm/vue/src/plugins/webpack/index.js

@@ -17,7 +17,6 @@ const { startDevServer } = require('@cypress/webpack-dev-server')
  *  }
  */
 const cypressPluginsFn = (on, config, webpackConfig) => {
-  require('@cypress/code-coverage/task')(on, config)
   on('dev-server:start', (options) => startDevServer({ options, webpackConfig }))
 
   return config

npm/vue/src/renderTestingPlatform.ts

@@ -0,0 +1,20 @@
+export const ROOT_ID = '__cy_root'
+
+/** Initialize an empty document with root element
+ * This only needs for experimentalComponentTesting
+*/
+export function renderTestingPlatform (headInnerHTML: string) {
+  // @ts-expect-error no idea
+  const document = cy.state('document')
+
+  if (document.body) document.body.innerHTML = ''
+
+  if (document.head) document.head.innerHTML = headInnerHTML
+
+  const rootNode = document.createElement('div')
+
+  rootNode.setAttribute('id', ROOT_ID)
+  document.getElementsByTagName('body')[0].prepend(rootNode)
+
+  return rootNode
+}