feat: update to Vite 3 (#22915)

* chore: do not rely on transitive dep. from npm/react * chore: bump to vite 3.0.2 * revert * target es6 * remove unused code * update styles * remove ts-ignore * bump to vite 3.0.3
cypress-io · Jul 28, 2022 · 6adba46 · 6adba46 · cypress-bot · Jul 28, 2022
1 parent b0590a1
commit 6adba46
Show file tree

Hide file tree

Showing 26 changed files with 822 additions and 747 deletions.
diff --git a/npm/react/package.json b/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": {

diff --git a/npm/react/tsconfig.json b/npm/react/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "module": "esnext",
     "moduleResolution": "node",
     "lib": [

diff --git a/npm/vite-dev-server/package.json b/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": [

diff --git a/npm/vite-dev-server/src/plugins/cypress.ts b/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) => {

diff --git a/npm/vue/package.json b/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",

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -43,6 +43,7 @@
     "cypress-real-events": "1.6.0",
     "dayjs": "^1.9.3",
     "disparity": "^3.0.0",
+    "engine.io-client": "3.5.2",
     "faker": "5.5.3",
     "fuzzysort": "^1.1.4",
     "graphql": "^15.5.1",
@@ -58,7 +59,7 @@
     "rollup-plugin-polyfill-node": "^0.7.0",
     "unplugin-icons": "0.13.2",
     "unplugin-vue-components": "^0.15.2",
-    "vite": "2.9.0-beta.3",
+    "vite": "3.0.3",
     "vite-plugin-components": "0.11.3",
     "vite-plugin-pages": "0.18.1",
     "vite-plugin-vue-layouts": "0.6.0",
@@ -106,7 +107,6 @@
         "nanoid",
         "pinia",
         "shiki",
-        "socket.io-client",
         "url",
         "vue",
         "vue-demi",

diff --git a/packages/app/src/App.vue b/packages/app/src/App.vue
@@ -5,3 +5,17 @@
     />
   </router-view>
 </template>
+
+<style lang="scss">
+html,
+body,
+#app {
+  @apply h-full bg-white;
+}
+
+@font-face {
+  font-family: "Fira Code";
+  src: local("Fira Code"),
+   url('../../frontend-shared/src/assets/fonts/FiraCode-VariableFont_wght.ttf') format("truetype");
+}
+</style>
diff --git a/packages/app/vite.config.ts → packages/app/vite.config.mjs b/packages/app/vite.config.ts → packages/app/vite.config.mjs
@@ -1,4 +1,4 @@
-import { makeConfig } from '../frontend-shared/vite.config'
+import { makeConfig } from '../frontend-shared/vite.config.mjs'
 import Layouts from 'vite-plugin-vue-layouts'
 import Pages from 'vite-plugin-pages'
 import Copy from 'rollup-plugin-copy'

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

diff --git a/packages/driver/vite.config.ts → packages/driver/vite.config.mjs b/packages/driver/vite.config.ts → packages/driver/vite.config.mjs
diff --git a/packages/frontend-shared/cypress/support/common.ts b/packages/frontend-shared/cypress/support/common.ts
@@ -28,7 +28,7 @@ declare global {
   }
 }
 
-import { initHighlighter } from '@cy/components/ShikiHighlight.vue'
+import { initHighlighter } from '@cy/components/highlight'
 
 // Make sure highlighter is initialized before
 // we show any code to avoid jank at rendering

diff --git a/packages/frontend-shared/package.json b/packages/frontend-shared/package.json
@@ -65,7 +65,7 @@
     "shiki": "^0.9.12",
     "unplugin-icons": "0.13.2",
     "unplugin-vue-components": "^0.15.4",
-    "vite": "2.9.0-beta.3",
+    "vite": "3.0.3",
     "vite-plugin-components": "0.11.3",
     "vite-plugin-windicss": "^1.4.7",
     "vite-svg-loader": "3.1.2",
@@ -106,7 +106,6 @@
         "human-interval",
         "lodash",
         "shiki",
-        "socket.io-client",
         "vue",
         "vue-i18n",
         "vue-toastification",

diff --git a/packages/frontend-shared/src/components/ShikiHighlight.cy.tsx b/packages/frontend-shared/src/components/ShikiHighlight.cy.tsx
@@ -1,4 +1,5 @@
-import ShikiHighlight, { initHighlighter } from './ShikiHighlight.vue'
+import ShikiHighlight from './ShikiHighlight.vue'
+import { initHighlighter } from './highlight'
 import code from '../../windi.config?raw'
 
 const devServerCode = `const { defineConfig } = require('cypress')

diff --git a/packages/frontend-shared/src/components/ShikiHighlight.vue b/packages/frontend-shared/src/components/ShikiHighlight.vue
@@ -72,51 +72,12 @@ shikiWrapperClasses computed property.
   </div>
 </template>
 
-<script lang="ts">
-import type { Highlighter, ILanguageRegistration } from 'shiki'
-import { getHighlighter, setOnigasmWASM } from 'shiki'
-import onigasm from 'onigasm/lib/onigasm.wasm?url'
-import shikiCyTheme from '../public/shiki/themes/cypress.theme.json'
-const langJSONFilesArray = import.meta.globEager('../public/shiki/languages/*.tmLanguage.json')
-
-// Convert to the format shiki needs for language customization.
-// @see https://github.com/shikijs/shiki/blob/main/docs/languages.md
-const langs: ILanguageRegistration[] = Object.values(langJSONFilesArray).map((grammar: any) => {
-  return {
-    grammar,
-    id: grammar.name,
-    scopeName: grammar.scopeName,
-  }
-})
-
-setOnigasmWASM(onigasm)
-
-let highlighter: Highlighter
-
-export type CyLangType = 'typescript' | 'javascript' | 'ts' | 'js' | 'css' | 'jsx' | 'tsx' | 'json' | 'yaml' | 'html' | 'plaintext' | 'txt' | 'text' | 'vue' | string
-
-export const langsSupported = langs.map((lang: ILanguageRegistration) => lang.id)
-
-export async function initHighlighter () {
-  if (highlighter) {
-    return
-  }
-
-  highlighter = await getHighlighter({
-    theme: shikiCyTheme as any,
-    langs,
-  })
-}
-
-const inheritAttrs = false
-
-export { highlighter, inheritAttrs }
-</script>
-
 <script lang="ts" setup>
 import type { Ref } from 'vue'
 import { computed, onBeforeMount, ref } from 'vue'
 import CopyButton from '../gql-components/CopyButton.vue'
+import { initHighlighter, langsSupported, highlighter } from './highlight'
+import type { CyLangType } from './highlight'
 import { useClipboard } from '../gql-components/useClipboard'
 
 const highlighterInitialized = ref(false)

diff --git a/packages/frontend-shared/src/components/highlight.ts b/packages/frontend-shared/src/components/highlight.ts
@@ -0,0 +1,38 @@
+import type { Highlighter, ILanguageRegistration } from 'shiki'
+import { getHighlighter, setOnigasmWASM } from 'shiki'
+import onigasm from 'onigasm/lib/onigasm.wasm?url'
+import shikiCyTheme from '../public/shiki/themes/cypress.theme.json'
+const langJSONFilesArray = import.meta.globEager('../public/shiki/languages/*.tmLanguage.json')
+
+// Convert to the format shiki needs for language customization.
+// @see https://github.com/shikijs/shiki/blob/main/docs/languages.md
+const langs: ILanguageRegistration[] = Object.values(langJSONFilesArray).map((grammar: any) => {
+  return {
+    grammar,
+    id: grammar.name,
+    scopeName: grammar.scopeName,
+  }
+})
+
+setOnigasmWASM(onigasm)
+
+let highlighter: Highlighter
+
+export type CyLangType = 'typescript' | 'javascript' | 'ts' | 'js' | 'css' | 'jsx' | 'tsx' | 'json' | 'yaml' | 'html' | 'plaintext' | 'txt' | 'text' | 'vue' | string
+
+export const langsSupported = langs.map((lang: ILanguageRegistration) => lang.id)
+
+export async function initHighlighter () {
+  if (highlighter) {
+    return
+  }
+
+  highlighter = await getHighlighter({
+    theme: shikiCyTheme as any,
+    langs,
+  })
+}
+
+const inheritAttrs = false
+
+export { highlighter, inheritAttrs }
diff --git a/packages/frontend-shared/src/styles/shared.scss b/packages/frontend-shared/src/styles/shared.scss
@@ -10,17 +10,6 @@
     local("Roboto-Light"), local("DroidSans"), local("Tahoma");
 }
 
-/* Set up Roboto for modern browsers, all weights */
-@supports (font-variation-settings: normal) {
-  @font-face {
-    font-family: 'Fira Code';
-    src: url('/fonts/FiraCode-VF.woff2') format('woff2 supports variations'),
-         url('/fonts/FiraCode-VF.woff2') format('woff2-variations');
-    font-weight: 100 1000;
-    font-stretch: 25% 151%;
-  }
-}
-
 html, body {
   @apply bg-white font-sans antialiased;
 }

diff --git a/packages/frontend-shared/vite.config.ts → packages/frontend-shared/vite.config.mjs b/packages/frontend-shared/vite.config.ts → packages/frontend-shared/vite.config.mjs
@@ -1,8 +1,10 @@
+// @ts-check
 import path from 'path'
+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/vite-plugin-vue-i18n'
 import VueSvgLoader from 'vite-svg-loader'
 import { CyCSSVitePlugin } from '@cypress-design/css'
 import Components from 'unplugin-vue-components/vite'
@@ -12,18 +14,8 @@ import { FileSystemIconLoader } from 'unplugin-icons/loaders'
 
 import PkgConfig from 'vite-plugin-package-config'
 
-// eslint-disable-next-line no-duplicate-imports
-import type { UserConfig } from 'vite'
-import type { ArgumentsType } from '@antfu/utils'
-
-type PluginOptions = {
-  plugins?: any[]
-
-  // These types aren't publicly exported
-  vueI18nOptions?: ArgumentsType<typeof VueI18n>[0]
-  iconsOptions?: ArgumentsType<typeof Icons>[0]
-  componentsOptions?: ArgumentsType<typeof Components>[0]
-}
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 const base = './'
 
@@ -39,7 +31,7 @@ const makePlugins = (plugins) => {
   return ([
     vue(),
     vueJsx(), // Used mostly for testing in *.(t|j)sx files.
-    VueI18n({
+    vueI18n({
       include: path.resolve(__dirname, './src/locales/**'),
       ...plugins.vueI18nOptions,
     }),
@@ -88,14 +80,26 @@ const makePlugins = (plugins) => {
 
     // package.json is modified and auto-updated when new cjs dependencies
     // are added
-    PkgConfig(),
+    PkgConfig.default(),
     // OptimizationPersist(),
     // For new plugins only! Merge options for shared plugins via PluginOptions.
     ...(plugins?.plugins || []),
   ])
 }
 
-export const makeConfig = (config: Partial<UserConfig> = {}, plugins: PluginOptions = {}): UserConfig => {
+/**
+ * @typedef PluginOptions
+ * @type {object}
+ * @property {import('@antfu/utils').ArgumentsType<typeof vueI18n>[0]=} vueI18nOptions
+ * @property {import('@antfu/utils').ArgumentsType<typeof Icons>[0]=} VueI18n
+ * @property {import('@antfu/utils').ArgumentsType<typeof Components>[0]=} componentOptions
+
+ * 
+ * @param {import('vite').UserConfig} config 
+ * @param {PluginOptions} plugins 
+ * @returns {import('vite').UserConfig}
+ */
+export const makeConfig = (config = {}, plugins = {}) => {
   // Don't overwrite plugins
   delete config.plugins