fix: support dynamic path with alias in new URL()

vitejs · Nov 12, 2022 · 497124b · 497124b
1 parent 7ac2535
commit 497124b
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 1 deletion.
diff --git a/packages/vite/src/node/plugins/assetImportMetaUrl.ts b/packages/vite/src/node/plugins/assetImportMetaUrl.ts
@@ -26,6 +26,7 @@ import { preloadHelperId } from './importAnalysisBuild'
 export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
   const normalizedPublicDir = normalizePath(config.publicDir)
   let assetResolver: ResolveFn
+  let aliaResolver: ResolveFn
 
   return {
     name: 'vite:asset-import-meta-url',
@@ -56,6 +57,22 @@ export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
             const ast = this.parse(rawUrl)
             const templateLiteral = (ast as any).body[0].expression
             if (templateLiteral.expressions.length) {
+              let newUrl: string | undefined
+              // rawUrl could include alias, try to resolve it
+              aliaResolver ??= config.createResolver()
+              const resolvedUrl = await aliaResolver(
+                rawUrl.slice(1),
+                undefined,
+                true
+              )
+              if (resolvedUrl) {
+                newUrl = normalizePath(path.relative(config.root, resolvedUrl))
+                if (!newUrl.startsWith('.')) {
+                  newUrl = `/${newUrl}`
+                }
+                newUrl = '`' + newUrl
+              }
+
               const pattern = JSON.stringify(buildGlobPattern(templateLiteral))
               // Note: native import.meta.url is not supported in the baseline
               // target so we use the global location here. It can be
@@ -64,7 +81,9 @@ export function assetImportMetaUrlPlugin(config: ResolvedConfig): Plugin {
               s.update(
                 index,
                 index + exp.length,
-                `new URL((import.meta.glob(${pattern}, { eager: true, import: 'default', as: 'url' }))[${rawUrl}], self.location)`
+                `new URL((import.meta.glob(${pattern}, { eager: true, import: 'default', as: 'url' }))[${
+                  newUrl ?? rawUrl
+                }], self.location)`
               )
               continue
             }

diff --git a/playground/assets/__tests__/assets.spec.ts b/playground/assets/__tests__/assets.spec.ts
@@ -303,6 +303,18 @@ test('new URL(`${dynamic}`, import.meta.url)', async () => {
   )
 })
 
+test('new URL(`@/${dynamic}`, import.meta.url)', async () => {
+  expect(await page.textContent('.dynamic-import-meta-url-1-alias')).toMatch(
+    isBuild ? 'data:image/png;base64' : '/foo/nested/icon.png'
+  )
+  expect(await page.textContent('.dynamic-import-meta-url-2-alias')).toMatch(
+    assetMatch
+  )
+  expect(await page.textContent('.dynamic-import-meta-url-js-alias')).toMatch(
+    isBuild ? 'data:application/javascript;base64' : '/foo/nested/test.js'
+  )
+})
+
 test('new URL(`non-existent`, import.meta.url)', async () => {
   expect(await page.textContent('.non-existent-import-meta-url')).toMatch(
     '/foo/non-existent'

diff --git a/playground/assets/index.html b/playground/assets/index.html
@@ -221,6 +221,19 @@ <h2>new URL(`./${dynamic}`, import.meta.url,) (with comma)</h2>
   <code class="dynamic-import-meta-url-2-comma"></code>
 </p>
 
+<h2>new URL(`@/${dynamic}`, import.meta.url)</h2>
+<p>
+  <img class="dynamic-import-meta-url-img-1-alias" />
+  <code class="dynamic-import-meta-url-1-alias"></code>
+</p>
+<p>
+  <img class="dynamic-import-meta-url-img-2-alias" />
+  <code class="dynamic-import-meta-url-2-alias"></code>
+</p>
+<p>
+  <code class="dynamic-import-meta-url-js-alias"></code>
+</p>
+
 <h2>new URL(`non-existent`, import.meta.url)</h2>
 <p>
   <code class="non-existent-import-meta-url"></code>
@@ -421,9 +434,21 @@ <h3>style in svg</h3>
   testDynamicImportMetaUrlWithComma('icon', 1)
   testDynamicImportMetaUrlWithComma('asset', 2)
 
+  function testDynamicImportMetaUrlWithAlias(name, i) {
+    const metaUrl = new URL(`@/${name}.png`, import.meta.url)
+    text(`.dynamic-import-meta-url-${i}-alias`, metaUrl)
+    document.querySelector(`.dynamic-import-meta-url-img-${i}-alias`).src =
+      metaUrl
+  }
+
+  testDynamicImportMetaUrlWithAlias('icon', 1)
+  testDynamicImportMetaUrlWithAlias('asset', 2)
+
   const name = 'test'
   const js = new URL(`./nested/${name}.js`, import.meta.url).href
   text('.dynamic-import-meta-url-js', js)
+  const aliasedJs = new URL(`@/${name}.js`, import.meta.url).href
+  text('.dynamic-import-meta-url-js-alias', aliasedJs)
 
   function text(el, text) {
     document.querySelector(el).textContent = text