Skip to content

Commit 7089528

Browse files
authoredMay 4, 2023
fix(assetImportMetaUrl): reserve dynamic template literal query params (#13034)
1 parent 21dd28d commit 7089528

File tree

3 files changed

+48
-2
lines changed

3 files changed

+48
-2
lines changed
 

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

+16-2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type { Plugin } from '../plugin'
55
import type { ResolvedConfig } from '../config'
66
import type { ResolveFn } from '../'
77
import {
8+
injectQuery,
89
isParentDirectory,
910
normalizePath,
1011
slash,
@@ -55,7 +56,12 @@ export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
5556

5657
// potential dynamic template string
5758
if (rawUrl[0] === '`' && rawUrl.includes('${')) {
58-
const ast = this.parse(rawUrl)
59+
let [pureUrl, queryString = ''] = rawUrl.split('?')
60+
if (queryString) {
61+
pureUrl += '`'
62+
queryString = '?' + queryString.slice(0, -1)
63+
}
64+
const ast = this.parse(pureUrl)
5965
const templateLiteral = (ast as any).body[0].expression
6066
if (templateLiteral.expressions.length) {
6167
const pattern = buildGlobPattern(templateLiteral)
@@ -65,6 +71,12 @@ export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
6571
continue
6672
}
6773

74+
const globOptions = {
75+
eager: true,
76+
import: 'default',
77+
// A hack to allow 'as' & 'query' exist at the same time
78+
query: injectQuery(queryString, 'url'),
79+
}
6880
// Note: native import.meta.url is not supported in the baseline
6981
// target so we use the global location here. It can be
7082
// window.location or self.location in case it is used in a Web Worker.
@@ -74,7 +86,9 @@ export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
7486
index + exp.length,
7587
`new URL((import.meta.glob(${JSON.stringify(
7688
pattern,
77-
)}, { eager: true, import: 'default', as: 'url' }))[${rawUrl}], self.location)`,
89+
)}, ${JSON.stringify(
90+
globOptions,
91+
)}))[${pureUrl}], self.location)`,
7892
)
7993
continue
8094
}

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

+11
Original file line numberDiff line numberDiff line change
@@ -324,6 +324,17 @@ test('new URL(`${dynamic}`, import.meta.url)', async () => {
324324
)
325325
})
326326

327+
test('new URL(`./${dynamic}?abc`, import.meta.url)', async () => {
328+
expect(await page.textContent('.dynamic-import-meta-url-1-query')).toMatch(
329+
isBuild ? 'data:image/png;base64' : '/foo/nested/icon.png?abc',
330+
)
331+
expect(await page.textContent('.dynamic-import-meta-url-2-query')).toMatch(
332+
isBuild
333+
? /\/foo\/assets\/asset-\w{8}\.png\?abc/
334+
: '/foo/nested/asset.png?abc',
335+
)
336+
})
337+
327338
test('new URL(`non-existent`, import.meta.url)', async () => {
328339
expect(await page.textContent('.non-existent-import-meta-url')).toMatch(
329340
new URL('non-existent', page.url()).pathname,

‎playground/assets/index.html

+21
Original file line numberDiff line numberDiff line change
@@ -221,6 +221,16 @@ <h2>new URL(`./${dynamic}`, import.meta.url,) (with comma)</h2>
221221
<code class="dynamic-import-meta-url-2-comma"></code>
222222
</p>
223223

224+
<h2>new URL(`./${dynamic}?abc`, import.meta.url)</h2>
225+
<p>
226+
<img class="dynamic-import-meta-url-img-1-query" />
227+
<code class="dynamic-import-meta-url-1-query"></code>
228+
</p>
229+
<p>
230+
<img class="dynamic-import-meta-url-img-2-query" />
231+
<code class="dynamic-import-meta-url-2-query"></code>
232+
</p>
233+
224234
<h2>new URL(`non-existent`, import.meta.url)</h2>
225235
<p>
226236
<code class="non-existent-import-meta-url"></code>
@@ -432,6 +442,17 @@ <h3>assets in noscript</h3>
432442
testDynamicImportMetaUrlWithComma('icon', 1)
433443
testDynamicImportMetaUrlWithComma('asset', 2)
434444

445+
function testDynamicImportMetaUrlWithQuery(name, i) {
446+
// prettier-ignore
447+
const metaUrl = new URL(`./nested/${name}.png?abc`, import.meta.url,)
448+
text(`.dynamic-import-meta-url-${i}-query`, metaUrl)
449+
document.querySelector(`.dynamic-import-meta-url-img-${i}-query`).src =
450+
metaUrl
451+
}
452+
453+
testDynamicImportMetaUrlWithQuery('icon', 1)
454+
testDynamicImportMetaUrlWithQuery('asset', 2)
455+
435456
{
436457
const name = 'test'
437458
const js = new URL(`./nested/${name}.js`, import.meta.url).href

0 commit comments

Comments
 (0)
Please sign in to comment.