chore: Update Vite to 4.3.0 (#26553)

Co-authored-by: cypress-bot[bot] <+cypress-bot[bot]@users.noreply.github.com> Co-authored-by: Lachlan Miller <[email protected]>
cypress-io · Apr 27, 2023 · 91cbc67 · 91cbc67 · cypress-bot · Apr 27, 2023
1 parent 8ed09aa
commit 91cbc67
Show file tree

Hide file tree

Showing 31 changed files with 1,595 additions and 1,182 deletions.
diff --git a/npm/react/package.json b/npm/react/package.json
@@ -18,7 +18,7 @@
   "devDependencies": {
     "@cypress/mount-utils": "0.0.0-development",
     "@types/semver": "7.3.9",
-    "@vitejs/plugin-react": "1.3.1",
+    "@vitejs/plugin-react": "4.0.0",
     "axios": "0.21.2",
     "cypress": "0.0.0-development",
     "prop-types": "15.7.2",
@@ -28,8 +28,8 @@
     "react-router-dom": "6.0.0-alpha.1",
     "semver": "^7.3.2",
     "typescript": "^4.7.4",
-    "vite": "4.1.4",
-    "vite-plugin-require-transform": "1.0.3"
+    "vite": "4.3.2",
+    "vite-plugin-require-transform": "1.0.12"
   },
   "peerDependencies": {
     "@types/react": "^16.9.16 || ^17.0.0",

diff --git a/npm/vite-dev-server/package.json b/npm/vite-dev-server/package.json
@@ -27,8 +27,8 @@
     "mocha": "^9.2.2",
     "sinon": "^13.0.1",
     "ts-node": "^10.9.1",
-    "vite": "4.1.4",
-    "vite-plugin-inspect": "0.4.3"
+    "vite": "4.3.2",
+    "vite-plugin-inspect": "0.7.24"
   },
   "files": [
     "dist",

diff --git a/npm/vite-dev-server/src/resolveConfig.ts b/npm/vite-dev-server/src/resolveConfig.ts
@@ -80,7 +80,11 @@ function makeCypressViteConfig (config: ViteDevServerConfig, vite: Vite): Inline
     paths: [projectRoot],
   })))
 
-  const viteConfig: InlineConfig = {
+  // Our Vite typings do not have the 'incremental' field since it was removed in 4.2, but users' version
+  // of Vite may be older and we want to use it if it's there
+  type Vite_4_1_Config = { optimizeDeps: { esbuildOptions: { incremental?: boolean } } }
+
+  const viteConfig: InlineConfig & Vite_4_1_Config = {
     root: projectRoot,
     base: `${devServerPublicPathRoute}/`,
     optimizeDeps: {

diff --git a/npm/vue/package.json b/npm/vue/package.json
@@ -18,7 +18,7 @@
   },
   "devDependencies": {
     "@cypress/mount-utils": "0.0.0-development",
-    "@vitejs/plugin-vue": "2.3.1",
+    "@vitejs/plugin-vue": "4.2.0",
     "@vue/compiler-sfc": "3.2.31",
     "@vue/test-utils": "2.0.2",
     "axios": "0.21.2",
@@ -27,7 +27,7 @@
     "globby": "^11.0.1",
     "tailwindcss": "1.1.4",
     "typescript": "^4.7.4",
-    "vite": "4.1.4",
+    "vite": "4.3.2",
     "vue": "3.2.31",
     "vue-i18n": "9.0.0-rc.6",
     "vue-router": "^4.0.0",

diff --git a/npm/webpack-preprocessor/__snapshots__/compilation.spec.js b/npm/webpack-preprocessor/__snapshots__/compilation.spec.js
@@ -1,6 +1,6 @@
 exports['webpack preprocessor - e2e correctly preprocesses the file 1'] = `
 it("is a test",(function(){expect(1).to.equal(1),expect(2).to.equal(2),expect(Math.min.apply(Math,[3,4])).to.equal(3)}));
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhhbXBsZV9zcGVjX291dHB1dC5qcyIsIm1hcHBpbmdzIjoiQUFBQUEsR0FBRyxhQUFhLFdBR2RDLE9BRmdCLEdBRU5DLEdBQUdDLE1BQU0sR0FDbkJGLE9BSG1CLEdBR1RDLEdBQUdDLE1BQU0sR0FDbkJGLE9BQU9HLEtBQUtDLElBQUcsTUFBUkQsS0FBWSxDQUFDLEVBQUcsS0FBS0YsR0FBR0MsTUFBTSxFQUN2QyIsInNvdXJjZXMiOlsid2VicGFjazovL0BjeXByZXNzL3dlYnBhY2stcHJlcHJvY2Vzc29yLy4vdGVzdC9fdGVzdC1vdXRwdXQvZXhhbXBsZV9zcGVjLmpzIl0sInNvdXJjZXNDb250ZW50IjpbIml0KCdpcyBhIHRlc3QnLCAoKSA9PiB7XG4gIGNvbnN0IFthLCBiXSA9IFsxLCAyXVxuXG4gIGV4cGVjdChhKS50by5lcXVhbCgxKVxuICBleHBlY3QoYikudG8uZXF1YWwoMilcbiAgZXhwZWN0KE1hdGgubWluKC4uLlszLCA0XSkpLnRvLmVxdWFsKDMpXG59KVxuIl0sIm5hbWVzIjpbIml0IiwiZXhwZWN0IiwidG8iLCJlcXVhbCIsIk1hdGgiLCJtaW4iXSwic291cmNlUm9vdCI6IiJ9
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhhbXBsZV9zcGVjX291dHB1dC5qcyIsIm1hcHBpbmdzIjoiQUFBQUEsR0FBRyxhQUFhLFdBR2RDLE9BRmdCLEdBRU5DLEdBQUdDLE1BQU0sR0FDbkJGLE9BSG1CLEdBR1RDLEdBQUdDLE1BQU0sR0FDbkJGLE9BQU9HLEtBQUtDLElBQUdDLE1BQVJGLEtBQVksQ0FBQyxFQUFHLEtBQUtGLEdBQUdDLE1BQU0sRUFDdkMiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9AY3lwcmVzcy93ZWJwYWNrLXByZXByb2Nlc3Nvci8uL3Rlc3QvX3Rlc3Qtb3V0cHV0L2V4YW1wbGVfc3BlYy5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyJpdCgnaXMgYSB0ZXN0JywgKCkgPT4ge1xuICBjb25zdCBbYSwgYl0gPSBbMSwgMl1cblxuICBleHBlY3QoYSkudG8uZXF1YWwoMSlcbiAgZXhwZWN0KGIpLnRvLmVxdWFsKDIpXG4gIGV4cGVjdChNYXRoLm1pbiguLi5bMywgNF0pKS50by5lcXVhbCgzKVxufSlcbiJdLCJuYW1lcyI6WyJpdCIsImV4cGVjdCIsInRvIiwiZXF1YWwiLCJNYXRoIiwibWluIiwiYXBwbHkiXSwic291cmNlUm9vdCI6IiJ9
 `
 
 exports['webpack preprocessor - e2e has less verbose syntax error 1'] = `

diff --git a/package.json b/package.json
@@ -103,7 +103,7 @@
     "@types/glob": "7.1.1",
     "@types/gulp": "^4.0.9",
     "@types/lodash": "^4.14.168",
-    "@types/markdown-it": "0.0.9",
+    "@types/markdown-it": "12.2.3",
     "@types/mini-css-extract-plugin": "1.2.3",
     "@types/mocha": "8.0.3",
     "@types/node": "14.14.31",

diff --git a/packages/app/.gitignore b/packages/app/.gitignore
@@ -1,2 +1,4 @@
 cypress/videos/*
-cypress/screenshots/*
+cypress/screenshots/*
+
+components.d.ts
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -27,7 +27,7 @@
     "@iconify/iconify": "2.1.2",
     "@iconify/json": "1.1.368",
     "@iconify/vue": "3.0.0-beta.1",
-    "@intlify/vite-plugin-vue-i18n": "2.4.0",
+    "@intlify/unplugin-vue-i18n": "0.10.0",
     "@packages/frontend-shared": "0.0.0-development",
     "@packages/telemetry": "0.0.0-development",
     "@percy/cypress": "^3.1.0",
@@ -36,9 +36,9 @@
     "@types/faker": "5.5.8",
     "@urql/core": "2.4.4",
     "@urql/vue": "0.6.2",
-    "@vitejs/plugin-legacy": "^2.1.0",
-    "@vitejs/plugin-vue": "2.2.4",
-    "@vitejs/plugin-vue-jsx": "1.3.8",
+    "@vitejs/plugin-legacy": "4.0.3",
+    "@vitejs/plugin-vue": "4.2.0",
+    "@vitejs/plugin-vue-jsx": "3.0.1",
     "@vueuse/core": "7.2.2",
     "ansi-to-html": "0.6.14",
     "bluebird": "3.5.3",
@@ -64,12 +64,11 @@
     "rollup-plugin-copy": "3.4.0",
     "rollup-plugin-polyfill-node": "^0.7.0",
     "unplugin-icons": "0.13.2",
-    "unplugin-vue-components": "^0.15.2",
-    "vite": "4.1.4",
-    "vite-plugin-components": "0.11.3",
-    "vite-plugin-pages": "0.18.1",
-    "vite-plugin-vue-layouts": "0.6.0",
-    "vite-svg-loader": "3.1.2",
+    "unplugin-vue-components": "^0.24.1",
+    "vite": "4.3.2",
+    "vite-plugin-pages": "0.29.0",
+    "vite-plugin-vue-layouts": "0.8.0",
+    "vite-svg-loader": "4.0.0",
     "vue": "3.2.47",
     "vue-i18n": "9.2.0-beta.7",
     "vue-router": "4",

diff --git a/packages/app/src/specs/generators/EmptyGenerator.vue b/packages/app/src/specs/generators/EmptyGenerator.vue
@@ -98,7 +98,7 @@
             },
             params: props.type === 'component' || props.type === 'componentEmpty'
               ? {
-                shouldShowTroubleRenderingAlert: true
+                shouldShowTroubleRenderingAlert: 'true'
               }
               : undefined
           }"

diff --git a/packages/app/src/specs/generators/component/ReactComponentGeneratorStepOne.vue b/packages/app/src/specs/generators/component/ReactComponentGeneratorStepOne.vue
@@ -48,7 +48,7 @@
         >
           <Button
             size="lg"
-            :to="{ name: 'SpecRunner', query: { file: posixify(result.file.relative) }, params: { shouldShowTroubleRenderingAlert: true } }"
+            :to="{ name: 'SpecRunner', query: { file: posixify(result.file.relative) }, params: { shouldShowTroubleRenderingAlert: 'true' } }"
             :prefix-icon="TestResultsIcon"
             prefix-icon-class="w-16px h-16px icon-dark-white"
             @click="emits('close')"

diff --git a/packages/app/src/specs/generators/component/VueComponentGeneratorStepOne.vue b/packages/app/src/specs/generators/component/VueComponentGeneratorStepOne.vue
@@ -42,7 +42,7 @@
         >
           <Button
             size="lg"
-            :to="{ name: 'SpecRunner', query: { file: posixify(result.file.relative) }, params: { shouldShowTroubleRenderingAlert: true } }"
+            :to="{ name: 'SpecRunner', query: { file: posixify(result.file.relative) }, params: { shouldShowTroubleRenderingAlert: 'true' } }"
             :prefix-icon="TestResultsIcon"
             prefix-icon-class="w-16px h-16px icon-dark-white"
             @click="emits('close')"

diff --git a/packages/app/tsconfig.json b/packages/app/tsconfig.json
@@ -24,7 +24,7 @@
     "types": [
       "cypress", 
       "cypress-real-events", 
-      "@intlify/vite-plugin-vue-i18n/client",
+      "@intlify/unplugin-vue-i18n/messages",
       "@testing-library/cypress"
     ]
   }

diff --git a/packages/app/vite.config.mjs b/packages/app/vite.config.mjs
@@ -16,7 +16,7 @@ export default makeConfig({}, {
       }],
     }),
     Legacy({
-      targets: ['Chrome >= 64', 'Firefox >= 86', 'Edge >= 79'],
+      targets: ['Chrome >= 80', 'Firefox >= 86', 'Edge >= 80'],
       modernPolyfills: true,
       renderLegacyChunks: false,
     }),

diff --git a/packages/driver/cypress/plugins/index.js b/packages/driver/cypress/plugins/index.js
@@ -7,32 +7,42 @@ const fs = require('fs-extra')
 const Promise = require('bluebird')
 const wp = require('@cypress/webpack-preprocessor')
 const Jimp = require('jimp')
+const webpackConfig = require('@packages/runner/webpack.config.ts')
 
-process.env.NO_LIVERELOAD = '1'
-const [webpackOptions] = require('@packages/runner/webpack.config.ts').default
+async function getWebpackOptions () {
+  process.env.NO_LIVERELOAD = '1'
+  const opts = await webpackConfig.default()
 
-// set mode to development which overrides
-// the 'none' value of the base webpack config
-// https://webpack.js.org/configuration/mode/
-webpackOptions.mode = 'development'
+  const webpackOptions = opts[0]
 
-// remove the evalDevToolPlugin which comes from the base
-// webpack config - otherwise we won't get code frames
-webpackOptions.plugins = _.reject(webpackOptions.plugins, { evalDevToolPlugin: true })
+  console.log(webpackOptions)
 
-const babelLoader = _.find(webpackOptions.module.rules, (rule) => {
-  return _.includes(rule.use.loader, 'babel-loader')
-})
+  // set mode to development which overrides
+  // the 'none' value of the base webpack config
+  // https://webpack.js.org/configuration/mode/
+  webpackOptions.mode = 'development'
 
-// get rid of prismjs plugin. the driver doesn't need it
-babelLoader.use.options.plugins = _.reject(babelLoader.use.options.plugins, (plugin) => {
-  return _.includes(plugin[0], 'babel-plugin-prismjs')
-})
+  // remove the evalDevToolPlugin which comes from the base
+  // webpack config - otherwise we won't get code frames
+  webpackOptions.plugins = _.reject(webpackOptions.plugins, { evalDevToolPlugin: true })
 
+  const babelLoader = _.find(webpackOptions.module.rules, (rule) => {
+    return _.includes(rule.use.loader, 'babel-loader')
+  })
+
+  // get rid of prismjs plugin. the driver doesn't need it
+  babelLoader.use.options.plugins = _.reject(babelLoader.use.options.plugins, (plugin) => {
+    return _.includes(plugin[0], 'babel-plugin-prismjs')
+  })
+
+  return webpackOptions
+}
 /**
  * @type {Cypress.PluginConfig}
  */
-module.exports = (on, config) => {
+module.exports = async (on, config) => {
+  const webpackOptions = await getWebpackOptions()
+
   on('file:preprocessor', wp({ webpackOptions }))
 
   on('task', {

diff --git a/packages/driver/package.json b/packages/driver/package.json
@@ -82,7 +82,7 @@
     "unfetch": "4.1.0",
     "url-parse": "1.5.9",
     "vanilla-text-mask": "5.1.1",
-    "vite": "4.1.4",
+    "vite": "4.3.2",
     "webpack": "^4.44.2",
     "zone.js": "0.9.0"
   },

diff --git a/packages/extension/gulpfile.ts b/packages/extension/gulpfile.ts
@@ -1,11 +1,17 @@
 import gulp from 'gulp'
 import rimraf from 'rimraf'
-import * as cypressIcons from '@packages/icons'
+import { waitUntilIconsBuilt } from '../../scripts/ensure-icons'
 import cp from 'child_process'
 import * as path from 'path'
 
 const nodeWebpack = path.join(__dirname, '..', '..', 'scripts', 'run-webpack.js')
 
+async function cypressIcons () {
+  await waitUntilIconsBuilt()
+
+  return require('@packages/icons')
+}
+
 const clean = (done) => {
   rimraf('dist', done)
 }
@@ -31,20 +37,25 @@ const css = () => {
   .pipe(gulp.dest('dist'))
 }
 
-const icons = () => {
+const icons = async () => {
+  const cyIcons = await cypressIcons()
+
   return gulp.src([
-    cypressIcons.getPathToIcon('icon_16x16.png'),
-    cypressIcons.getPathToIcon('icon_19x19.png'),
-    cypressIcons.getPathToIcon('icon_38x38.png'),
-    cypressIcons.getPathToIcon('icon_48x48.png'),
-    cypressIcons.getPathToIcon('icon_128x128.png'),
+    cyIcons.getPathToIcon('icon_16x16.png'),
+    cyIcons.getPathToIcon('icon_19x19.png'),
+    cyIcons.getPathToIcon('icon_38x38.png'),
+    cyIcons.getPathToIcon('icon_48x48.png'),
+    cyIcons.getPathToIcon('icon_128x128.png'),
   ])
   .pipe(gulp.dest('dist/icons'))
 }
 
-const logos = () => {
+const logos = async () => {
+  const cyIcons = await cypressIcons()
+
+  // appease TS
   return gulp.src([
-    cypressIcons.getPathToLogo('cypress-bw.png'),
+    cyIcons.getPathToLogo('cypress-bw.png'),
   ])
   .pipe(gulp.dest('dist/logos'))
 }

diff --git a/packages/frontend-shared/package.json b/packages/frontend-shared/package.json
@@ -25,7 +25,7 @@
     "@headlessui/vue": "1.4.0",
     "@iconify/json": "1.1.368",
     "@iconify/vue": "3.0.0-beta.1",
-    "@intlify/vite-plugin-vue-i18n": "2.4.0",
+    "@intlify/unplugin-vue-i18n": "0.10.0",
     "@percy/core": "^1.0.0-beta.48",
     "@percy/cypress": "^3.1.0",
     "@testing-library/cypress": "9.0.0",
@@ -35,8 +35,8 @@
     "@urql/exchange-execute": "1.1.0",
     "@urql/exchange-graphcache": "4.3.6",
     "@urql/vue": "0.6.2",
-    "@vitejs/plugin-vue": "4.0.0",
-    "@vitejs/plugin-vue-jsx": "3.0.0",
+    "@vitejs/plugin-vue": "4.2.0",
+    "@vitejs/plugin-vue-jsx": "3.0.1",
     "@vue/compiler-core": "3.2.47",
     "@vue/compiler-dom": "3.2.47",
     "@vue/compiler-sfc": "3.2.47",
@@ -62,15 +62,16 @@
     "javascript-time-ago": "2.3.8",
     "just-my-luck": "3.0.0",
     "lodash": "4.17.21",
-    "markdown-it": "12.2.0",
+    "markdown-it": "13.0.1",
     "modern-normalize": "1.1.0",
     "patch-package": "6.4.7",
     "shiki": "^0.9.12",
     "unplugin-icons": "0.13.2",
-    "unplugin-vue-components": "^0.15.4",
-    "vite": "4.1.4",
+    "unplugin-vue-components": "^0.24.1",
+    "vite": "4.3.2",
     "vite-plugin-components": "0.11.3",
-    "vite-svg-loader": "3.1.2",
+    "vite-plugin-windicss": "1.8.10",
+    "vite-svg-loader": "4.0.0",
     "vue": "3.2.47",
     "vue-eslint-parser": "7.11.0",
     "vue-i18n": "9.2.0-beta.7",

diff --git a/packages/frontend-shared/src/composables/useMarkdown.ts b/packages/frontend-shared/src/composables/useMarkdown.ts
@@ -83,11 +83,14 @@ const buildClasses = (options) => {
 }
 
 export const useMarkdown = (target: Ref<HTMLElement>, text: MaybeRef<string>, options: UseMarkdownOptions = {}) => {
-  options.openExternal = options.openExternal || true
+  const normalizedOptions: UseMarkdownOptions = {
+    ...options,
+    openExternal: options.openExternal ?? true,
+  }
 
-  const classes = buildClasses(options)
+  const classes = buildClasses(normalizedOptions)
 
-  const md = MarkdownIt({
+  const md = new MarkdownIt({
     html: true,
     linkify: true,
     highlight (str) {
@@ -97,7 +100,7 @@ export const useMarkdown = (target: Ref<HTMLElement>, text: MaybeRef<string>, op
 
   md.use(MarkdownItClass, classes)
 
-  if (options.openExternal) {
+  if (normalizedOptions.openExternal) {
     const open = useExternalLink()
 
     whenever(target, () => {

diff --git a/packages/frontend-shared/src/locales/i18n.ts b/packages/frontend-shared/src/locales/i18n.ts
@@ -5,7 +5,7 @@ import {
 
 import type enUS from './en-US.json'
 // Imports a special compiled messages object
-import compiledMessages from '@intlify/vite-plugin-vue-i18n/messages'
+import compiledMessages from '@intlify/unplugin-vue-i18n/messages'
 
 // The raw strings for the default language (en) used for testing
 import rawJsonMessages from './en-US.json?raw'

diff --git a/packages/frontend-shared/tsconfig.json b/packages/frontend-shared/tsconfig.json
@@ -58,7 +58,7 @@
       "chrome",
       "./vue-shims",
       "./vite-env",
-      "@intlify/vite-plugin-vue-i18n/client",
+      "@intlify/unplugin-vue-i18n/messages",
       "@testing-library/cypress",
       "cypress-real-events", 
       "cypress",

diff --git a/packages/frontend-shared/vite.config.mjs b/packages/frontend-shared/vite.config.mjs
@@ -4,7 +4,7 @@ import { fileURLToPath } from 'url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
-import { vueI18n } from '@intlify/vite-plugin-vue-i18n'
+import vueI18n from '@intlify/unplugin-vue-i18n/vite'
 import VueSvgLoader from 'vite-svg-loader'
 import { CyCSSVitePlugin } from '@cypress-design/css'
 import Components from 'unplugin-vue-components/vite'
@@ -32,7 +32,7 @@ const makePlugins = (plugins) => {
     vue(),
     vueJsx(), // Used mostly for testing in *.(t|j)sx files.
     vueI18n({
-      include: path.resolve(__dirname, './src/locales/**'),
+      include: path.resolve(__dirname, './src/locales/**/*.json'),
       ...plugins.vueI18nOptions,
     }),
     Icons({