fix: watch assets referenced by new URL(, import.meta.url) (#20382)

Author: sapphi-red

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

@@ -141,6 +141,7 @@ export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
                   const publicPath = '/' + path.posix.relative(publicDir, file)
                   builtUrl = await fileToUrl(this, publicPath)
                 } else {
+                  this.addWatchFile(file)
                   builtUrl = await fileToUrl(this, file)
                 }
               } catch {

playground/assets/__tests__/assets.spec.ts

@@ -536,7 +536,31 @@ describe.runIf(isBuild)('encodeURI', () => {
 })
 
 test('new URL(..., import.meta.url)', async () => {
-  expect(await page.textContent('.import-meta-url')).toMatch(assetMatch)
+  const imgMatch = isBuild
+    ? /\/foo\/bar\/assets\/img-[-\w]{8}\.png/
+    : '/foo/bar/import-meta-url/img.png'
+
+  expect(await page.textContent('.import-meta-url')).toMatch(imgMatch)
+  if (isServe) {
+    const loadPromise = page.waitForEvent('load')
+    const newContent = readFile('import-meta-url/img-update.png', null)
+    let oldContent: Buffer
+    editFile('import-meta-url/img.png', null, (_oldContent) => {
+      oldContent = _oldContent
+      return newContent
+    })
+    await loadPromise // expect reload
+    await expect
+      .poll(() => page.textContent('.import-meta-url'))
+      .toMatch(imgMatch)
+
+    const loadPromise2 = page.waitForEvent('load')
+    editFile('import-meta-url/img.png', null, (_) => oldContent)
+    await loadPromise2 // expect reload
+    await expect
+      .poll(() => page.textContent('.import-meta-url'))
+      .toMatch(imgMatch)
+  }
 })
 
 test('new URL("@/...", import.meta.url)', async () => {

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

@@ -192,7 +192,10 @@ test('?url import on css', async () => {
 })
 
 test('new URL(..., import.meta.url)', async () => {
-  expect(await page.textContent('.import-meta-url')).toMatch(urlAssetMatch)
+  const urlImgMatch = isBuild
+    ? /\/foo%20bar\/other-assets\/img-[-\w]{8}\.png/
+    : '/import-meta-url/img.png'
+  expect(await page.textContent('.import-meta-url')).toMatch(urlImgMatch)
 })
 
 test('new URL(`${dynamic}`, import.meta.url)', async () => {

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

@@ -207,7 +207,10 @@ test('?url import on css', async () => {
 })
 
 test('new URL(..., import.meta.url)', async () => {
-  expect(await page.textContent('.import-meta-url')).toMatch(absoluteAssetMatch)
+  const absoluteImgMatch = isBuild
+    ? /http.*\/other-assets\/img-[-\w]{8}\.png/
+    : '/import-meta-url/img.png'
+  expect(await page.textContent('.import-meta-url')).toMatch(absoluteImgMatch)
 })
 
 test('new URL(`${dynamic}`, import.meta.url)', async () => {

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

@@ -198,7 +198,10 @@ test('?url import on css', async () => {
 })
 
 test('new URL(..., import.meta.url)', async () => {
-  expect(await page.textContent('.import-meta-url')).toMatch(absoluteAssetMatch)
+  const absoluteImgMatch = isBuild
+    ? /http.*\/other-assets\/img-[-\w]{8}\.png/
+    : '/import-meta-url/img.png'
+  expect(await page.textContent('.import-meta-url')).toMatch(absoluteImgMatch)
 })
 
 test('new URL(`${dynamic}`, import.meta.url)', async () => {

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

@@ -196,7 +196,10 @@ test('?url import on css', async () => {
 })
 
 test('new URL(..., import.meta.url)', async () => {
-  expect(await page.textContent('.import-meta-url')).toMatch(urlAssetMatch)
+  const urlImgMatch = isBuild
+    ? /http:\/\/localhost:\d+\/other-assets\/img-[-\w]{8}\.png/
+    : '/import-meta-url/img.png'
+  expect(await page.textContent('.import-meta-url')).toMatch(urlImgMatch)
 })
 
 test('new URL(`${dynamic}`, import.meta.url)', async () => {

playground/assets/import-meta-url/img-update.png

@@ -584,7 +584,7 @@ <h3>assets in template</h3>
   document.body.appendChild(linkTag)
 
   // const url = new URL('non_existent_file.png', import.meta.url)
-  const metaUrl = new URL('./nested/asset.png', import.meta.url)
+  const metaUrl = new URL('./import-meta-url/img.png', import.meta.url)
   text('.import-meta-url', metaUrl)
   document.querySelector('.import-meta-url-img').src = metaUrl
 

playground/assets/import-meta-url/img.png

@@ -129,17 +129,43 @@ export async function getBgColor(
   return hexToNameMap[rgbToHex(rgb)] ?? rgb
 }
 
-export function readFile(filename: string): string {
-  return fs.readFileSync(path.resolve(testDir, filename), 'utf-8')
+export function readFile(filename: string, encoding?: BufferEncoding): string
+export function readFile(filename: string, encoding: null): Buffer
+export function readFile(
+  filename: string,
+  encoding?: BufferEncoding | null,
+): Buffer | string {
+  if (encoding === undefined) encoding = 'utf-8'
+  return fs.readFileSync(path.resolve(testDir, filename), encoding)
 }
 
 export function editFile(
   filename: string,
-  replacer: (str: string) => string,
+  replacer: (content: string) => string,
+): void
+export function editFile(
+  filename: string,
+  encoding: null,
+  replacer: (content: Buffer) => Buffer,
+): void
+export function editFile(
+  filename: string,
+  encoding: BufferEncoding | null,
+  replacer: ((content: Buffer) => Buffer) | ((content: string) => string),
+): void
+export function editFile(
+  filename: string,
+  encodingOrReplacer: BufferEncoding | null | ((content: string) => string),
+  maybeReplacer?: ((content: Buffer) => Buffer) | ((content: string) => string),
 ): void {
   filename = path.resolve(testDir, filename)
-  const content = fs.readFileSync(filename, 'utf-8')
-  const modified = replacer(content)
+  const [encoding, replacer] = maybeReplacer
+    ? [encodingOrReplacer as BufferEncoding | null, maybeReplacer]
+    : ['utf-8' as const, encodingOrReplacer as (content: string) => string]
+  const content: string | Buffer = fs.readFileSync(filename, encoding)
+  const modified = (replacer as (content: string | Buffer) => string | Buffer)(
+    content,
+  )
   fs.writeFileSync(filename, modified)
 }