fix(hmr): add timestamp for assets in dev (#13371)

packages/vite/src/node/plugins/asset.ts

@@ -191,7 +191,9 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
 
       id = id.replace(urlRE, '$1').replace(unnededFinalQueryCharRE, '')
       const url = await fileToUrl(id, config, this)
-      return `export default ${JSON.stringify(url)}`
+      return `export default ${JSON.stringify(
+        config.command === 'serve' ? `${url}?t=${Date.now()}` : url,
+      )}`
     },
 
     renderChunk(code, chunk, opts) {

playground/assets/__tests__/assets.spec.ts

@@ -293,7 +293,9 @@ describe('svg fragments', () => {
 
   test('from js import', async () => {
     const img = await page.$('.svg-frag-import')
-    expect(await img.getAttribute('src')).toMatch(/svg#icon-heart-view$/)
+    expect(await img.getAttribute('src')).toMatch(
+      isBuild ? /svg#icon-heart-view$/ : /svg\?t=\d+#icon-heart-view$/,
+    )
   })
 })
 
@@ -321,11 +323,11 @@ test('?url import', async () => {
 test('?url import on css', async () => {
   const src = readFile('css/icons.css')
   const txt = await page.textContent('.url-css')
-  expect(txt).toEqual(
-    isBuild
-      ? `data:text/css;base64,${Buffer.from(src).toString('base64')}`
-      : '/foo/bar/css/icons.css',
-  )
+  isBuild
+    ? expect(txt).toEqual(
+        `data:text/css;base64,${Buffer.from(src).toString('base64')}`,
+      )
+    : expect(txt).toMatch(/^\/foo\/bar\/css\/icons.css\?t=\d+$/)
 })
 
 describe('unicode url', () => {

playground/assets/__tests__/relative-base/relative-base-assets.spec.ts

@@ -179,7 +179,9 @@ describe('svg fragments', () => {
 
   test('from js import', async () => {
     const img = await page.$('.svg-frag-import')
-    expect(await img.getAttribute('src')).toMatch(/svg#icon-heart-view$/)
+    expect(await img.getAttribute('src')).toMatch(
+      isBuild ? /svg#icon-heart-view$/ : /svg\?t=\d+#icon-heart-view$/,
+    )
   })
 })
 

playground/assets/__tests__/runtime-base/runtime-base-assets.spec.ts

@@ -179,7 +179,9 @@ describe('svg fragments', () => {
 
   test('from js import', async () => {
     const img = await page.$('.svg-frag-import')
-    expect(await img.getAttribute('src')).toMatch(/svg#icon-heart-view$/)
+    expect(await img.getAttribute('src')).toMatch(
+      isBuild ? /svg#icon-heart-view$/ : /svg\?t=\d+#icon-heart-view$/,
+    )
   })
 })
 

playground/assets/__tests__/url-base/url-base-assets.spec.ts

@@ -173,7 +173,9 @@ describe('svg fragments', () => {
 
   test('from js import', async () => {
     const img = await page.$('.svg-frag-import')
-    expect(await img.getAttribute('src')).toMatch(/svg#icon-heart-view$/)
+    expect(await img.getAttribute('src')).toMatch(
+      isBuild ? /svg#icon-heart-view$/ : /svg\?t=\d+#icon-heart-view$/,
+    )
   })
 })
 

playground/hmr/__tests__/hmr.spec.ts

@@ -809,4 +809,17 @@ if (import.meta.hot) {
     )
     await untilUpdated(() => el.textContent(), 'cc')
   })
+
+  test('assets HMR', async () => {
+    await page.goto(viteTestUrl)
+    const el = await page.$('#logo')
+    await untilBrowserLogAfter(
+      () =>
+        editFile('logo.svg', (code) =>
+          code.replace('height="30px"', 'height="40px"'),
+        ),
+      /Logo updated/,
+    )
+    await untilUpdated(() => el.evaluate((it) => `${it.clientHeight}`), '40')
+  })
 }

playground/hmr/hmr.ts

@@ -4,12 +4,14 @@ import './importing-updated'
 import './invalidation/parent'
 import './file-delete-restore'
 import './optional-chaining/parent'
+import logo from './logo.svg'
 
 export const foo = 1
 text('.app', foo)
 text('.dep', depFoo)
 text('.nested', nestedFoo)
 text('.virtual', virtual)
+setLogo(logo)
 
 const btn = document.querySelector('.virtual-update') as HTMLButtonElement
 btn.onclick = () => {
@@ -34,6 +36,11 @@ if (import.meta.hot) {
     text('.nested', newNestedFoo)
   }
 
+  import.meta.hot.accept('./logo.svg', (newUrl) => {
+    setLogo(newUrl.default)
+    console.log('Logo updated', newUrl.default)
+  })
+
   import.meta.hot.accept('./hmrDep', ({ foo, nestedFoo }) => {
     handleDep('single dep', foo, nestedFoo)
   })
@@ -121,6 +128,10 @@ function text(el, text) {
   document.querySelector(el).textContent = text
 }
 
+function setLogo(src) {
+  ;(document.querySelector('#logo') as HTMLImageElement).src = src
+}
+
 function removeCb({ msg }) {
   text('.toRemove', msg)
   import.meta.hot.off('custom:remove', removeCb)

playground/hmr/index.html

@@ -33,3 +33,4 @@
 <div class="importing-reloaded"></div>
 <div class="file-delete-restore"></div>
 <div class="optional-chaining"></div>
+<image id="logo"></image>

playground/hmr/logo.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 30 30" height="30px" width="30px" xmlns="http://www.w3.org/2000/svg">
+    <text x="1" y="20" fill="#646cff" font-size="16px">Vite</text>
+</svg>