test: add not inlined assets hmr test

packages/vite/src/node/build.ts

@@ -120,7 +120,10 @@ export interface BuildEnvironmentOptions {
   assetsDir?: string
   /**
    * Static asset files smaller than this number (in bytes) will be inlined as
-   * base64 strings. Default limit is `4096` (4 KiB). Set to `0` to disable.
+   * base64 strings. If a callback is passed, a boolean can be returned to opt-in
+   * or opt-out of inlining. If nothing is returned the default logic applies.
+   *
+   * Default limit is `4096` (4 KiB). Set to `0` to disable.
    * @default 4096
    */
   assetsInlineLimit?:

playground/hmr-ssr/__tests__/hmr-ssr.spec.ts

@@ -884,7 +884,20 @@ if (!isBuild) {
     )
   })
 
-  test('assets HMR', async () => {
+  test('not inlined assets HMR', async () => {
+    await setupModuleRunner('/hmr.ts')
+    const el = () => hmr('#logo-no-inline')
+    await untilConsoleLogAfter(
+      () =>
+        editFile('logo-no-inline.svg', (code) =>
+          code.replace('height="30px"', 'height="40px"'),
+        ),
+      /Logo-no-inline updated/,
+    )
+    await vi.waitUntil(() => el().includes('logo-no-inline.svg?t='))
+  })
+
+  test('inlined assets HMR', async () => {
     await setupModuleRunner('/hmr.ts')
     const el = () => hmr('#logo')
     const initialLogoUrl = el()

playground/hmr-ssr/hmr.ts

@@ -8,6 +8,7 @@ import './intermediate-file-delete'
 import './circular'
 import './queries'
 import logo from './logo.svg'
+import logoNoInline from './logo-no-inline.svg'
 import { msg as softInvalidationMsg } from './soft-invalidation'
 
 export const foo = 1
@@ -16,7 +17,8 @@ text('.dep', depFoo)
 text('.nested', nestedFoo)
 text('.virtual', virtual)
 text('.soft-invalidation', softInvalidationMsg)
-setLogo(logo)
+setImgSrc('#logo', logo)
+setImgSrc('#logo-no-inline', logoNoInline)
 
 globalThis.__HMR__['virtual:increment'] = () => {
   if (import.meta.hot) {
@@ -41,10 +43,15 @@ if (import.meta.hot) {
   }
 
   import.meta.hot.accept('./logo.svg', (newUrl) => {
-    setLogo(newUrl.default)
+    setImgSrc('#logo', newUrl.default)
     log('Logo updated', newUrl.default)
   })
 
+  import.meta.hot.accept('./logo-no-inline.svg', (newUrl) => {
+    setImgSrc('#logo-no-inline', newUrl.default)
+    log('Logo-no-inline updated', newUrl.default)
+  })
+
   import.meta.hot.accept('./hmrDep', ({ foo, nestedFoo }) => {
     handleDep('single dep', foo, nestedFoo)
   })
@@ -98,8 +105,8 @@ function text(el, text) {
   hmr(el, text)
 }
 
-function setLogo(src) {
-  hmr('#logo', src)
+function setImgSrc(el, src) {
+  hmr(el, src)
 }
 
 function removeCb({ msg }) {

playground/hmr-ssr/vite.config.ts

@@ -5,6 +5,13 @@ export default defineConfig({
   experimental: {
     hmrPartialAccept: true,
   },
+  build: {
+    assetsInlineLimit(filePath) {
+      if (filePath.endsWith('logo-no-inline.svg')) {
+        return false
+      }
+    },
+  },
   plugins: [
     {
       name: 'mock-custom',

playground/hmr/__tests__/hmr.spec.ts

@@ -998,7 +998,20 @@ if (!isBuild) {
     )
   })
 
-  test('assets HMR', async () => {
+  test('not inlined assets HMR', async () => {
+    await page.goto(viteTestUrl)
+    const el = await page.$('#logo-no-inline')
+    await untilBrowserLogAfter(
+      () =>
+        editFile('logo-no-inline.svg', (code) =>
+          code.replace('height="30px"', 'height="40px"'),
+        ),
+      /Logo-no-inline updated/,
+    )
+    await untilUpdated(() => el.evaluate((it) => `${it.clientHeight}`), '40')
+  })
+
+  test('inlined assets HMR', async () => {
     await page.goto(viteTestUrl)
     const el = await page.$('#logo')
     await untilBrowserLogAfter(

playground/hmr/hmr.ts

@@ -6,6 +6,7 @@ import './optional-chaining/parent'
 import './intermediate-file-delete'
 import './circular'
 import logo from './logo.svg'
+import logoNoInline from './logo-no-inline.svg'
 import { msg as softInvalidationMsg } from './soft-invalidation'
 
 export const foo = 1
@@ -14,7 +15,8 @@ text('.dep', depFoo)
 text('.nested', nestedFoo)
 text('.virtual', virtual)
 text('.soft-invalidation', softInvalidationMsg)
-setLogo(logo)
+setImgSrc('#logo', logo)
+setImgSrc('#logo-no-inline', logoNoInline)
 
 const btn = document.querySelector('.virtual-update') as HTMLButtonElement
 btn.onclick = () => {
@@ -40,10 +42,15 @@ if (import.meta.hot) {
   }
 
   import.meta.hot.accept('./logo.svg', (newUrl) => {
-    setLogo(newUrl.default)
+    setImgSrc('#logo', newUrl.default)
     console.log('Logo updated', newUrl.default)
   })
 
+  import.meta.hot.accept('./logo-no-inline.svg', (newUrl) => {
+    setImgSrc('#logo-no-inline', newUrl.default)
+    console.log('Logo-no-inline updated', newUrl.default)
+  })
+
   import.meta.hot.accept('./hmrDep', ({ foo, nestedFoo }) => {
     handleDep('single dep', foo, nestedFoo)
   })
@@ -131,8 +138,8 @@ function text(el, text) {
   document.querySelector(el).textContent = text
 }
 
-function setLogo(src) {
-  ;(document.querySelector('#logo') as HTMLImageElement).src = src
+function setImgSrc(el, src) {
+  ;(document.querySelector(el) as HTMLImageElement).src = src
 }
 
 function removeCb({ msg }) {

playground/hmr/index.html

@@ -38,5 +38,6 @@
 <div class="optional-chaining"></div>
 <button class="intermediate-file-delete-increment">1</button>
 <div class="intermediate-file-delete-display"></div>
-<image id="logo"></image>
+<img id="logo"></img>
+<img id="logo-no-inline"></img>
 <div class="circular"></div>

playground/hmr/vite.config.ts

@@ -7,6 +7,13 @@ export default defineConfig({
   experimental: {
     hmrPartialAccept: true,
   },
+  build: {
+    assetsInlineLimit(filePath) {
+      if (filePath.endsWith('logo-no-inline.svg')) {
+        return false
+      }
+    },
+  },
   plugins: [
     {
       name: 'mock-custom',