Skip to content

Commit 6bc8bf6

Browse files
sapphi-redsapphi-red
authored
fix: watch assets referenced by new URL(, import.meta.url) (#20382)
1 parent 1a1cc8a commit 6bc8bf6

10 files changed

Lines changed: 74 additions & 11 deletions

File tree

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,7 @@ export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
141141
const publicPath = '/' + path.posix.relative(publicDir, file)
142142
builtUrl = await fileToUrl(this, publicPath)
143143
} else {
144+
this.addWatchFile(file)
144145
builtUrl = await fileToUrl(this, file)
145146
}
146147
} catch {

‎playground/assets/__tests__/assets.spec.ts‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -536,7 +536,31 @@ describe.runIf(isBuild)('encodeURI', () => {
536536
})
537537

538538
test('new URL(..., import.meta.url)', async () => {
539-
expect(await page.textContent('.import-meta-url')).toMatch(assetMatch)
539+
const imgMatch = isBuild
540+
? /\/foo\/bar\/assets\/img-[-\w]{8}\.png/
541+
: '/foo/bar/import-meta-url/img.png'
542+
543+
expect(await page.textContent('.import-meta-url')).toMatch(imgMatch)
544+
if (isServe) {
545+
const loadPromise = page.waitForEvent('load')
546+
const newContent = readFile('import-meta-url/img-update.png', null)
547+
let oldContent: Buffer
548+
editFile('import-meta-url/img.png', null, (_oldContent) => {
549+
oldContent = _oldContent
550+
return newContent
551+
})
552+
await loadPromise // expect reload
553+
await expect
554+
.poll(() => page.textContent('.import-meta-url'))
555+
.toMatch(imgMatch)
556+
557+
const loadPromise2 = page.waitForEvent('load')
558+
editFile('import-meta-url/img.png', null, (_) => oldContent)
559+
await loadPromise2 // expect reload
560+
await expect
561+
.poll(() => page.textContent('.import-meta-url'))
562+
.toMatch(imgMatch)
563+
}
540564
})
541565

542566
test('new URL("@/...", import.meta.url)', async () => {

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,10 @@ test('?url import on css', async () => {
192192
})
193193

194194
test('new URL(..., import.meta.url)', async () => {
195-
expect(await page.textContent('.import-meta-url')).toMatch(urlAssetMatch)
195+
const urlImgMatch = isBuild
196+
? /\/foo%20bar\/other-assets\/img-[-\w]{8}\.png/
197+
: '/import-meta-url/img.png'
198+
expect(await page.textContent('.import-meta-url')).toMatch(urlImgMatch)
196199
})
197200

198201
test('new URL(`${dynamic}`, import.meta.url)', async () => {

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,10 @@ test('?url import on css', async () => {
207207
})
208208

209209
test('new URL(..., import.meta.url)', async () => {
210-
expect(await page.textContent('.import-meta-url')).toMatch(absoluteAssetMatch)
210+
const absoluteImgMatch = isBuild
211+
? /http.*\/other-assets\/img-[-\w]{8}\.png/
212+
: '/import-meta-url/img.png'
213+
expect(await page.textContent('.import-meta-url')).toMatch(absoluteImgMatch)
211214
})
212215

213216
test('new URL(`${dynamic}`, import.meta.url)', async () => {

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,10 @@ test('?url import on css', async () => {
198198
})
199199

200200
test('new URL(..., import.meta.url)', async () => {
201-
expect(await page.textContent('.import-meta-url')).toMatch(absoluteAssetMatch)
201+
const absoluteImgMatch = isBuild
202+
? /http.*\/other-assets\/img-[-\w]{8}\.png/
203+
: '/import-meta-url/img.png'
204+
expect(await page.textContent('.import-meta-url')).toMatch(absoluteImgMatch)
202205
})
203206

204207
test('new URL(`${dynamic}`, import.meta.url)', async () => {

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,10 @@ test('?url import on css', async () => {
196196
})
197197

198198
test('new URL(..., import.meta.url)', async () => {
199-
expect(await page.textContent('.import-meta-url')).toMatch(urlAssetMatch)
199+
const urlImgMatch = isBuild
200+
? /http:\/\/localhost:\d+\/other-assets\/img-[-\w]{8}\.png/
201+
: '/import-meta-url/img.png'
202+
expect(await page.textContent('.import-meta-url')).toMatch(urlImgMatch)
200203
})
201204

202205
test('new URL(`${dynamic}`, import.meta.url)', async () => {

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

9.49 KB
Loading

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

15.3 KB
Loading

‎playground/assets/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -584,7 +584,7 @@ <h3>assets in template</h3>
584584
document.body.appendChild(linkTag)
585585

586586
// const url = new URL('non_existent_file.png', import.meta.url)
587-
const metaUrl = new URL('./nested/asset.png', import.meta.url)
587+
const metaUrl = new URL('./import-meta-url/img.png', import.meta.url)
588588
text('.import-meta-url', metaUrl)
589589
document.querySelector('.import-meta-url-img').src = metaUrl
590590

‎playground/test-utils.ts‎

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -129,17 +129,43 @@ export async function getBgColor(
129129
return hexToNameMap[rgbToHex(rgb)] ?? rgb
130130
}
131131

132-
export function readFile(filename: string): string {
133-
return fs.readFileSync(path.resolve(testDir, filename), 'utf-8')
132+
export function readFile(filename: string, encoding?: BufferEncoding): string
133+
export function readFile(filename: string, encoding: null): Buffer
134+
export function readFile(
135+
filename: string,
136+
encoding?: BufferEncoding | null,
137+
): Buffer | string {
138+
if (encoding === undefined) encoding = 'utf-8'
139+
return fs.readFileSync(path.resolve(testDir, filename), encoding)
134140
}
135141

136142
export function editFile(
137143
filename: string,
138-
replacer: (str: string) => string,
144+
replacer: (content: string) => string,
145+
): void
146+
export function editFile(
147+
filename: string,
148+
encoding: null,
149+
replacer: (content: Buffer) => Buffer,
150+
): void
151+
export function editFile(
152+
filename: string,
153+
encoding: BufferEncoding | null,
154+
replacer: ((content: Buffer) => Buffer) | ((content: string) => string),
155+
): void
156+
export function editFile(
157+
filename: string,
158+
encodingOrReplacer: BufferEncoding | null | ((content: string) => string),
159+
maybeReplacer?: ((content: Buffer) => Buffer) | ((content: string) => string),
139160
): void {
140161
filename = path.resolve(testDir, filename)
141-
const content = fs.readFileSync(filename, 'utf-8')
142-
const modified = replacer(content)
162+
const [encoding, replacer] = maybeReplacer
163+
? [encodingOrReplacer as BufferEncoding | null, maybeReplacer]
164+
: ['utf-8' as const, encodingOrReplacer as (content: string) => string]
165+
const content: string | Buffer = fs.readFileSync(filename, encoding)
166+
const modified = (replacer as (content: string | Buffer) => string | Buffer)(
167+
content,
168+
)
143169
fs.writeFileSync(filename, modified)
144170
}
145171

0 commit comments

Comments
 (0)