From 59dbed90dcfd6c71d3478cd61d0228cff702087f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Barth=C3=A9l=C3=A9my=20Ledoux?= <bart@cypress.io>
Date: Tue, 9 Mar 2021 10:21:16 -0600
Subject: [PATCH] fix(component-testing): vite server dependency refresh
 (#15366)

* fix: monkey patch vite

* fix: make sure we on ly refresh once

* fix: update error display on compile error

* chore: add compatibility comment

* fix: add vite-dev-server to ci
---
 circle.yml                                   | 13 +++++++++++++
 npm/vite-dev-server/index-template.html      | 19 ++++++++++++++++++-
 npm/vite-dev-server/package.json             |  7 +++++--
 npm/vite-dev-server/src/makeCypressPlugin.ts |  1 -
 yarn.lock                                    | 18 +++++++++---------
 5 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/circle.yml b/circle.yml
index a0ce7856f656..c86a4a890139 100644
--- a/circle.yml
+++ b/circle.yml
@@ -1055,6 +1055,16 @@ jobs:
           name: Run tests
           command: yarn workspace @cypress/webpack-dev-server test
 
+  npm-vite-dev-server:
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: ~/
+      - check-conditional-ci
+      - run:
+          name: Run tests
+          command: yarn workspace @cypress/vite-dev-server test
+
   npm-rollup-dev-server:
     <<: *defaults
     steps:
@@ -1751,6 +1761,9 @@ linux-workflow: &linux-workflow
     - npm-webpack-dev-server:
         requires:
           - build
+    - npm-vite-dev-server:
+        requires:
+          - build
     - npm-rollup-dev-server:
         requires:
           - build
diff --git a/npm/vite-dev-server/index-template.html b/npm/vite-dev-server/index-template.html
index 0140f725593e..b0a4eea73811 100644
--- a/npm/vite-dev-server/index-template.html
+++ b/npm/vite-dev-server/index-template.html
@@ -24,7 +24,24 @@
       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
+        const expectedMessage = `Failed to fetch dynamically imported module: ${location.origin + specPath}`
+        // since vite does not work with IE we can use URLSearchParams without polyfill
+        var searchParams = new URLSearchParams(window.location.search);
+        if (e.message === expectedMessage && !searchParams.has("refresh")) {
+          searchParams.set('refresh', '1')
+          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}}}"));
       }
diff --git a/npm/vite-dev-server/package.json b/npm/vite-dev-server/package.json
index be2b963b0e28..61368d52c324 100644
--- a/npm/vite-dev-server/package.json
+++ b/npm/vite-dev-server/package.json
@@ -17,7 +17,7 @@
   },
   "devDependencies": {
     "@types/mustache": "4.1.1",
-    "vite": "2.0.1"
+    "vite": "2.0.5"
   },
   "peerDependencies": {
     "vite": ">= 2"
@@ -34,5 +34,8 @@
   "bugs": "https://github.com/cypress-io/cypress/issues/new?template=1-bug-report.md",
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "ciJobs": [
+    "npm-vite-dev-server"
+  ]
 }
diff --git a/npm/vite-dev-server/src/makeCypressPlugin.ts b/npm/vite-dev-server/src/makeCypressPlugin.ts
index cb089183f064..878a1e87a8d8 100644
--- a/npm/vite-dev-server/src/makeCypressPlugin.ts
+++ b/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 []
diff --git a/yarn.lock b/yarn.lock
index 7af8e2bdd8fb..da4e06e7846f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14858,10 +14858,10 @@ es6-weak-map@^2.0.1:
     es6-iterator "^2.0.3"
     es6-symbol "^3.1.1"
 
-esbuild@^0.8.34:
-  version "0.8.38"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.8.38.tgz#04dc395e15c77bbc9d6798e9b31275546bcf7b9a"
-  integrity sha512-wSunJl8ujgBs9eVGubc8Y6fn/DkDjNyfQBVOFTY1E7sRxr8KTjmqyLIiE0M3Z4CjMnCu/rttCugwnOzY+HiwIw==
+esbuild@^0.8.52:
+  version "0.8.57"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.8.57.tgz#a42d02bc2b57c70bcd0ef897fe244766bb6dd926"
+  integrity sha512-j02SFrUwFTRUqiY0Kjplwjm1psuzO1d6AjaXKuOR9hrY0HuPsT6sV42B6myW34h1q4CRy+Y3g4RU/cGJeI/nNA==
 
 escalade@^3.0.1, escalade@^3.1.1:
   version "3.1.1"
@@ -35006,12 +35006,12 @@ vinyl@^2.0.0, vinyl@^2.1.0, vinyl@^2.2.0:
     remove-trailing-separator "^1.0.1"
     replace-ext "^1.0.0"
 
-vite@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-2.0.1.tgz#348fc5c0de510aa90bd01ecf87df210ce741b38e"
-  integrity sha512-x7ZfikjNs+6n4cdvwb9L5r5xBCdjmtmHFHaI4JVR3nAkJbMCK/dynfDWky8/NseZ9Ncz1jVxTQ/Bcf+n1ps1Ww==
+vite@2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-2.0.5.tgz#ac46857a3fa8686d077921e61bd48a986931df1d"
+  integrity sha512-QTgEDbq1WsTtr6j+++ewjhBFEk6c8v0xz4fb/OWJQKNYU8ZZtphOshwOqAlnarSstPBtWCBR0tsugXx6ajfoUg==
   dependencies:
-    esbuild "^0.8.34"
+    esbuild "^0.8.52"
     postcss "^8.2.1"
     resolve "^1.19.0"
     rollup "^2.38.5"