fix: allow getting URL of JS files in publicDir (#17915)

vitejs · Sep 1, 2024 · 943ece1 · 943ece1
1 parent 8c661b2
commit 943ece1
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 1 deletion.
diff --git a/packages/vite/src/node/server/middlewares/static.ts b/packages/vite/src/node/server/middlewares/static.ts
@@ -16,6 +16,7 @@ import {
   isSameFileUri,
   normalizePath,
   removeLeadingSlash,
+  urlRE,
 } from '../../utils'
 import {
   cleanUrl,
@@ -86,7 +87,9 @@ export function servePublicMiddleware(
     if (
       (publicFiles && !publicFiles.has(toFilePath(req.url!))) ||
       isImportRequest(req.url!) ||
-      isInternalRequest(req.url!)
+      isInternalRequest(req.url!) ||
+      // for `/public-file.js?url` to be transformed
+      urlRE.test(req.url!)
     ) {
       return next()
     }

diff --git a/playground/assets/__tests__/assets.spec.ts b/playground/assets/__tests__/assets.spec.ts
@@ -143,6 +143,18 @@ describe('asset imports from js', () => {
         "
       `)
   })
+
+  test('from /public (js)', async () => {
+    expect(await page.textContent('.public-js-import')).toMatch(
+      '/foo/bar/raw.js',
+    )
+    expect(await page.textContent('.public-js-import-content'))
+      .toMatchInlineSnapshot(`
+        "document.querySelector('.raw-js').textContent =
+          '[success] Raw js from /public loaded'
+        "
+      `)
+  })
 })
 
 describe('css url() references', () => {

diff --git a/playground/assets/index.html b/playground/assets/index.html
@@ -31,6 +31,10 @@ <h2>Asset Imports from JS</h2>
     From publicDir (json): <code class="public-json-import"></code> Content:
     <code class="public-json-import-content"></code>
   </li>
+  <li>
+    From publicDir (js): <code class="public-js-import"></code> Content:
+    <code class="public-js-import-content"></code>
+  </li>
 </ul>
 
 <h2>CSS url references</h2>
@@ -441,6 +445,13 @@ <h3>assets in noscript</h3>
     text('.public-json-import-content', await res.text())
   })()
 
+  import publicJsUrl from '/raw.js?url'
+  text('.public-js-import', publicJsUrl)
+  ;(async () => {
+    const res = await fetch(publicJsUrl)
+    text('.public-js-import-content', await res.text())
+  })()
+
   import svgFrag from './nested/fragment.svg'
   text('.svg-frag-import-path', svgFrag)
   document.querySelector('.svg-frag-import').src = svgFrag + '#icon-heart-view'