Revert "feat: update to Vite 3 (#22915)"

This reverts commit 6adba46.
cypress-io · Aug 1, 2022 · 05a3bf1 · 05a3bf1
1 parent 4d3ad9e
commit 05a3bf1
Show file tree

Hide file tree

Showing 26 changed files with 747 additions and 822 deletions.
diff --git a/npm/react/package.json b/npm/react/package.json
@@ -21,6 +21,7 @@
     "@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",
@@ -29,7 +30,7 @@
     "rollup": "^2.38.5",
     "rollup-plugin-typescript2": "^0.29.0",
     "typescript": "^4.2.3",
-    "vite": "3.0.3",
+    "vite": "2.9.5",
     "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": "es6",
+    "target": "es5",
     "module": "esnext",
     "moduleResolution": "node",
     "lib": [

diff --git a/npm/vite-dev-server/package.json b/npm/vite-dev-server/package.json
@@ -18,7 +18,6 @@
     "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": {
@@ -27,7 +26,7 @@
     "mocha": "^9.2.2",
     "sinon": "^13.0.1",
     "ts-node": "^10.2.1",
-    "vite": "3.0.3",
+    "vite": "2.9.0-beta.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,7 +2,6 @@ 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'
@@ -53,44 +52,21 @@ export const Cypress = (
     configResolved (config) {
       base = config.base
     },
-    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'
-      })
-
+    async transformIndexHtml () {
       const indexHtmlPath = resolve(projectRoot, indexHtmlFile)
 
       debug('resolved the indexHtmlPath as', indexHtmlPath, 'from', indexHtmlFile)
-
-      let indexHtmlContent = await fs.promises.readFile(indexHtmlPath, { encoding: 'utf8' })
-
-      // Inject the script tags
-      indexHtmlContent = indexHtmlContent.replace(
-        '<head>',
-        `<head>
-        ${scriptTagsToInject.map((script) => script.toString())}
-      `,
-      )
-
+      const indexHtmlContent = await fs.promises.readFile(indexHtmlPath, { encoding: 'utf8' })
       // find </body> last index
       const endOfBody = indexHtmlContent.lastIndexOf('</body>')
 
       // insert the script in the end of the body
-      const newHtml = `
-        ${indexHtmlContent.substring(0, endOfBody)}
-        <script>${loader}</script>
-        ${indexHtmlContent.substring(endOfBody)}
-      `
-
-      return newHtml
+      return `${indexHtmlContent.substring(0, endOfBody)
+    }<script>
+    ${loader}
+    </script>${
+      indexHtmlContent.substring(endOfBody)
+    }`
     },
     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": "3.0.3",
+    "vite": "2.9.5",
     "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
@@ -44,7 +44,6 @@
     "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",
@@ -60,7 +59,7 @@
     "rollup-plugin-polyfill-node": "^0.7.0",
     "unplugin-icons": "0.13.2",
     "unplugin-vue-components": "^0.15.2",
-    "vite": "3.0.3",
+    "vite": "2.9.0-beta.3",
     "vite-plugin-components": "0.11.3",
     "vite-plugin-pages": "0.18.1",
     "vite-plugin-vue-layouts": "0.6.0",
@@ -107,6 +106,7 @@
         "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,17 +5,3 @@
     />
   </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.mjs → packages/app/vite.config.ts b/packages/app/vite.config.mjs → packages/app/vite.config.ts
@@ -1,4 +1,4 @@
-import { makeConfig } from '../frontend-shared/vite.config.mjs'
+import { makeConfig } from '../frontend-shared/vite.config'
 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": "3.0.3",
+    "vite": "2.9.0-beta.3",
     "webpack": "^4.44.2",
     "zone.js": "0.9.0"
   },

diff --git a/packages/driver/vite.config.mjs → packages/driver/vite.config.ts b/packages/driver/vite.config.mjs → packages/driver/vite.config.ts
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/highlight'
+import { initHighlighter } from '@cy/components/ShikiHighlight.vue'
 
 // 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": "3.0.3",
+    "vite": "2.9.0-beta.3",
     "vite-plugin-components": "0.11.3",
     "vite-svg-loader": "3.1.2",
     "vue": "3.2.31",
@@ -105,6 +105,7 @@
         "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,5 +1,4 @@
-import ShikiHighlight from './ShikiHighlight.vue'
-import { initHighlighter } from './highlight'
+import ShikiHighlight, { initHighlighter } from './ShikiHighlight.vue'
 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,12 +72,51 @@ 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
diff --git a/packages/frontend-shared/src/styles/shared.scss b/packages/frontend-shared/src/styles/shared.scss
@@ -10,6 +10,17 @@
     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.mjs → packages/frontend-shared/vite.config.ts b/packages/frontend-shared/vite.config.mjs → packages/frontend-shared/vite.config.ts
@@ -1,10 +1,8 @@
-// @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'
@@ -14,8 +12,18 @@ import { FileSystemIconLoader } from 'unplugin-icons/loaders'
 
 import PkgConfig from 'vite-plugin-package-config'
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+// 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 base = './'
 
@@ -31,7 +39,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,
     }),
@@ -80,26 +88,14 @@ const makePlugins = (plugins) => {
 
     // package.json is modified and auto-updated when new cjs dependencies
     // are added
-    PkgConfig.default(),
+    PkgConfig(),
     // OptimizationPersist(),
     // For new plugins only! Merge options for shared plugins via PluginOptions.
     ...(plugins?.plugins || []),
   ])
 }
 
-/**
- * @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 = {}) => {
+export const makeConfig = (config: Partial<UserConfig> = {}, plugins: PluginOptions = {}): UserConfig => {
   // Don't overwrite plugins
   delete config.plugins