feat: import public non-asset URL (#13422)

Author: sapphi-red

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

@@ -29,7 +29,7 @@ import { FS_PREFIX } from '../constants'
 export const assetUrlRE = /__VITE_ASSET__([a-z\d]+)__(?:\$_(.*?)__)?/g
 
 const rawRE = /(?:\?|&)raw(?:&|$)/
-const urlRE = /(\?|&)url(?:&|$)/
+export const urlRE = /(\?|&)url(?:&|$)/
 const jsSourceMapRE = /\.[cm]?js\.map$/
 const unnededFinalQueryCharRE = /[?&]$/
 
@@ -147,7 +147,7 @@ export function assetPlugin(config: ResolvedConfig): Plugin {
     },
 
     resolveId(id) {
-      if (!config.assetsInclude(cleanUrl(id))) {
+      if (!config.assetsInclude(cleanUrl(id)) && !urlRE.test(id)) {
         return
       }
       // imports to absolute urls pointing to files in /public

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

@@ -55,7 +55,7 @@ import {
 } from '../ssr/ssrExternal'
 import { getDepsOptimizer, optimizedDepNeedsInterop } from '../optimizer'
 import { ERR_CLOSED_SERVER } from '../server/pluginContainer'
-import { checkPublicFile } from './asset'
+import { checkPublicFile, urlRE } from './asset'
 import {
   ERR_OUTDATED_OPTIMIZED_DEP,
   throwOutdatedRequest,
@@ -507,14 +507,20 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
             // warn imports to non-asset /public files
             if (
               specifier[0] === '/' &&
-              !config.assetsInclude(cleanUrl(specifier)) &&
-              !specifier.endsWith('.json') &&
+              !(
+                config.assetsInclude(cleanUrl(specifier)) ||
+                urlRE.test(specifier)
+              ) &&
               checkPublicFile(specifier, config)
             ) {
               throw new Error(
-                `Cannot import non-asset file ${specifier} which is inside /public.` +
+                `Cannot import non-asset file ${specifier} which is inside /public. ` +
                   `JS/CSS files inside /public are copied as-is on build and ` +
-                  `can only be referenced via <script src> or <link href> in html.`,
+                  `can only be referenced via <script src> or <link href> in html. ` +
+                  `If you want to get the URL of that file, use ${injectQuery(
+                    specifier,
+                    'url',
+                  )} instead.`,
               )
             }
 

packages/vite/src/node/server/middlewares/transform.ts

@@ -37,6 +37,7 @@ import {
 } from '../../plugins/optimizedDeps'
 import { ERR_CLOSED_SERVER } from '../pluginContainer'
 import { getDepsOptimizer } from '../../optimizer'
+import { urlRE } from '../../plugins/asset'
 
 const debugCache = createDebugger('vite:cache')
 
@@ -136,14 +137,22 @@ export function transformMiddleware(
 
           if (isImportRequest(url)) {
             const rawUrl = removeImportQuery(url)
-
-            warning =
-              'Assets in public cannot be imported from JavaScript.\n' +
-              `Instead of ${colors.cyan(
-                rawUrl,
-              )}, put the file in the src directory, and use ${colors.cyan(
-                rawUrl.replace(publicPath, '/src/'),
-              )} instead.`
+            if (urlRE.test(url)) {
+              warning =
+                `Assets in the public directory are served at the root path.\n` +
+                `Instead of ${colors.cyan(rawUrl)}, use ${colors.cyan(
+                  rawUrl.replace(publicPath, '/'),
+                )}.`
+            } else {
+              warning =
+                'Assets in public directory cannot be imported from JavaScript.\n' +
+                `If you intend to import that asset, put the file in the src directory, and use ${colors.cyan(
+                  rawUrl.replace(publicPath, '/src/'),
+                )} instead of ${colors.cyan(rawUrl)}.\n` +
+                `If you intend to use the URL of that asset, use ${colors.cyan(
+                  injectQuery(rawUrl.replace(publicPath, '/'), 'url'),
+                )}.`
+            }
           } else {
             warning =
               `files in the public directory are served at the root path.\n` +

playground/assets/__tests__/assets.spec.ts

@@ -100,6 +100,19 @@ describe('asset imports from js', () => {
   test('from /public', async () => {
     expect(await page.textContent('.public-import')).toMatch(iconMatch)
   })
+
+  test('from /public (json)', async () => {
+    expect(await page.textContent('.public-json-import')).toMatch(
+      '/foo/foo.json',
+    )
+    expect(await page.textContent('.public-json-import-content'))
+      .toMatchInlineSnapshot(`
+      "{
+        \\"foo\\": \\"bar\\"
+      }
+      "
+    `)
+  })
 })
 
 describe('css url() references', () => {

playground/assets/index.html

@@ -26,6 +26,10 @@ <h2>Asset Imports from JS</h2>
   <li>Relative: <code class="asset-import-relative"></code></li>
   <li>Absolute: <code class="asset-import-absolute"></code></li>
   <li>From publicDir: <code class="public-import"></code></li>
+  <li>
+    From publicDir (json): <code class="public-json-import"></code> Content:
+    <code class="public-json-import-content"></code>
+  </li>
 </ul>
 
 <h2>CSS url references</h2>
@@ -378,6 +382,13 @@ <h3>assets in noscript</h3>
   import publicUrl from '/icon.png'
   text('.public-import', publicUrl)
 
+  import publicJsonUrl from '/foo.json?url'
+  text('.public-json-import', publicJsonUrl)
+  ;(async () => {
+    const res = await fetch(publicJsonUrl)
+    text('.public-json-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'

playground/assets/static/foo.json

@@ -0,0 +1,3 @@
+{
+  "foo": "bar"
+}