refactor: fix hmr sw mode cache busting

jlewin · Jun 25, 2020 · 28e4dfa · 28e4dfa
1 parent f572906
commit 28e4dfa
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 40 deletions.
diff --git a/src/client/client.ts b/src/client/client.ts
@@ -69,10 +69,6 @@ function warnFailedFetch(err: Error, path: string | string[]) {
 // Listen for messages
 socket.addEventListener('message', async ({ data }) => {
   const payload = JSON.parse(data) as HMRPayload | MultiUpdatePayload
-  const { changeSrcPath } = payload as UpdatePayload
-  if (changeSrcPath) {
-    await bustSwCache(changeSrcPath)
-  }
   if (payload.type === 'multi') {
     payload.updates.forEach(handleMessage)
   } else {
@@ -82,10 +78,12 @@ socket.addEventListener('message', async ({ data }) => {
 
 async function handleMessage(payload: HMRPayload) {
   const { path, changeSrcPath, timestamp } = payload as UpdatePayload
+  if (changeSrcPath) {
+    bustSwCache(changeSrcPath)
+  }
   if (path && path !== changeSrcPath) {
-    await bustSwCache(path)
+    bustSwCache(path)
   }
-
   switch (payload.type) {
     case 'connected':
       console.log(`[vite] connected.`)
@@ -96,21 +94,21 @@ async function handleMessage(payload: HMRPayload) {
           .catch((err) => warnFailedFetch(err, path))
           .then((m) => () => {
             __VUE_HMR_RUNTIME__.reload(path, m.default)
-            console.log(`[vite] ${path} reloaded!`)
+            console.log(`[vite] ${path} reloaded.`)
           })
       )
       break
     case 'vue-rerender':
       const templatePath = `${path}?type=template`
-      await bustSwCache(templatePath)
+      bustSwCache(templatePath)
       import(`${templatePath}&t=${timestamp}`).then((m) => {
         __VUE_HMR_RUNTIME__.rerender(path, m.render)
         console.log(`[vite] ${path} template updated.`)
       })
       break
     case 'style-update':
       const importQuery = path.includes('?') ? '&import' : '?import'
-      await bustSwCache(`${path}${importQuery}`)
+      bustSwCache(`${path}${importQuery}`)
       await import(`${path}${importQuery}&t=${timestamp}`)
       console.log(`[vite] ${path} updated.`)
       break

diff --git a/src/node/hmrPayload.ts b/src/node/hmrPayload.ts
@@ -20,6 +20,7 @@ export interface UpdatePayload {
 
 interface StyleRemovePayload {
   type: 'style-remove'
+  path: string
   id: string
 }
 

diff --git a/src/node/server/serverPluginHmr.ts b/src/node/server/serverPluginHmr.ts
@@ -166,15 +166,16 @@ export const hmrPlugin: ServerPlugin = ({
         })
         console.log(chalk.green(`[vite] `) + `page reloaded.`)
       } else {
-        const count = hmrBoundaries.size
-        const plural = count === 1 ? `` : `s`
+        const boundaries = [...hmrBoundaries]
+        const file =
+          boundaries.length === 1 ? boundaries[0] : `${boundaries.length} files`
         console.log(
           chalk.green(`[vite:hmr] `) +
-            `${hmrBoundaries.size} file${plural} hot updated due to change in ${relativeFile}.`
+            `${file} hot updated due to change in ${relativeFile}.`
         )
         send({
           type: 'multi',
-          updates: [...hmrBoundaries].map((boundary) => {
+          updates: boundaries.map((boundary) => {
             return {
               type: boundary.endsWith('vue') ? 'vue-reload' : 'js-update',
               path: boundary,

diff --git a/src/node/server/serverPluginVue.ts b/src/node/server/serverPluginVue.ts
@@ -258,6 +258,7 @@ export const vuePlugin: ServerPlugin = ({
       didUpdateStyle = true
       send({
         type: 'style-remove',
+        path: publicPath,
         id: `${styleId}-${i + nextStyles.length}`
       })
     })

diff --git a/test/test.js b/test/test.js
@@ -701,6 +701,9 @@ describe('vite', () => {
       devServer = execa(binPath, {
         cwd: tempDir
       })
+      devServer.stderr.on('data', (data) => {
+        serverLogs.push(data.toString())
+      })
       await new Promise((resolve) => {
         devServer.stdout.on('data', (data) => {
           serverLogs.push(data.toString())
@@ -750,33 +753,41 @@ describe('vite', () => {
 
     // Assert that all edited files are reflected on page reload
     // i.e. service-worker cache is correctly busted
-    test('sw cache busting', async () => {
-      await page.reload()
-
-      expect(await getText('.hmr-increment')).toMatch('>>> count is 1337 <<<')
-      expect(await getText('.hmr-propagation')).toMatch('666')
-      expect(await getComputedColor('.postcss-from-css')).toBe('rgb(0, 128, 0)')
-      expect(await getComputedColor('.postcss-from-sfc')).toBe('rgb(0, 0, 0)')
-      expect(await getComputedColor('.style-scoped')).toBe('rgb(0, 0, 0)')
-      expect(await getComputedColor('.css-modules-sfc')).toBe('rgb(0, 0, 0)')
-      expect(await getComputedColor('.css-modules-import')).toBe('rgb(0, 0, 1)')
-      expect(await getComputedColor('.pug')).toBe('rgb(0, 0, 0)')
-      expect(await getText('.pug')).toMatch('pug with hmr')
-      expect(await getComputedColor('.src-imports-style')).toBe('rgb(0, 0, 0)')
-      expect(await getText('.src-imports-script')).toMatch('bye from')
-      expect(await getText('.src-imports-script')).toMatch('changed')
-      expect(await getText('.jsx-root')).toMatch('2046')
-      expect(await getText('.alias')).toMatch('alias hmr works')
-      expect(await getComputedColor('.transform-scss')).toBe('rgb(0, 0, 0)')
-      expect(await getText('.transform-js')).toMatch('3')
-      expect(await getText('.json')).toMatch('with hmr')
-
-      // ensure import graph is still working
-      await updateFile('json/testJsonImport.json', (c) =>
-        c.replace('with hmr', 'with sw reload')
-      )
-      await expectByPolling(() => getText('.json'), 'with sw reload')
-    })
+    if (process.env.USE_SW) {
+      test('sw cache busting', async () => {
+        await page.reload()
+
+        expect(await getText('.hmr-increment')).toMatch('>>> count is 1337 <<<')
+        expect(await getText('.hmr-propagation')).toMatch('666')
+        expect(await getComputedColor('.postcss-from-css')).toBe(
+          'rgb(0, 128, 0)'
+        )
+        expect(await getComputedColor('.postcss-from-sfc')).toBe('rgb(0, 0, 0)')
+        expect(await getComputedColor('.style-scoped')).toBe('rgb(0, 0, 0)')
+        expect(await getComputedColor('.css-modules-sfc')).toBe('rgb(0, 0, 0)')
+        expect(await getComputedColor('.css-modules-import')).toBe(
+          'rgb(0, 0, 1)'
+        )
+        expect(await getComputedColor('.pug')).toBe('rgb(0, 0, 0)')
+        expect(await getText('.pug')).toMatch('pug with hmr')
+        expect(await getComputedColor('.src-imports-style')).toBe(
+          'rgb(0, 0, 0)'
+        )
+        expect(await getText('.src-imports-script')).toMatch('bye from')
+        expect(await getText('.src-imports-script')).toMatch('changed')
+        expect(await getText('.jsx-root')).toMatch('2046')
+        expect(await getText('.alias')).toMatch('alias hmr works')
+        expect(await getComputedColor('.transform-scss')).toBe('rgb(0, 0, 0)')
+        expect(await getText('.transform-js')).toMatch('3')
+        expect(await getText('.json')).toMatch('with hmr')
+
+        // ensure import graph is still working
+        await updateFile('json/testJsonImport.json', (c) =>
+          c.replace('with hmr', 'with sw reload')
+        )
+        await expectByPolling(() => getText('.json'), 'with sw reload')
+      })
+    }
   })
 })