From 3867db67ec1923777c62b85287aa8b8c1c2b36b2 Mon Sep 17 00:00:00 2001
From: sapphi-red <49056869+sapphi-red@users.noreply.github.com>
Date: Sun, 4 Jun 2023 18:57:24 +0900
Subject: [PATCH] feat: import public non-asset URL

---
 packages/vite/src/node/plugins/asset.ts       |  4 +--
 .../vite/src/node/plugins/importAnalysis.ts   | 16 ++++++++----
 .../src/node/server/middlewares/transform.ts  | 25 +++++++++++++------
 playground/assets/__tests__/assets.spec.ts    | 13 ++++++++++
 playground/assets/index.html                  | 11 ++++++++
 playground/assets/static/foo.json             |  3 +++
 6 files changed, 57 insertions(+), 15 deletions(-)
 create mode 100644 playground/assets/static/foo.json

diff --git a/packages/vite/src/node/plugins/asset.ts b/packages/vite/src/node/plugins/asset.ts
index 174b3e5826646c..bf6ce07dd49fa1 100644
--- a/packages/vite/src/node/plugins/asset.ts
+++ b/packages/vite/src/node/plugins/asset.ts
@@ -28,7 +28,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 = /[?&]$/
 
@@ -146,7 +146,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
diff --git a/packages/vite/src/node/plugins/importAnalysis.ts b/packages/vite/src/node/plugins/importAnalysis.ts
index 21f8b807fa13c7..e820f005eac4a4 100644
--- a/packages/vite/src/node/plugins/importAnalysis.ts
+++ b/packages/vite/src/node/plugins/importAnalysis.ts
@@ -54,7 +54,7 @@ import {
   shouldExternalizeForSSR,
 } from '../ssr/ssrExternal'
 import { getDepsOptimizer, optimizedDepNeedsInterop } from '../optimizer'
-import { checkPublicFile } from './asset'
+import { checkPublicFile, urlRE } from './asset'
 import {
   ERR_OUTDATED_OPTIMIZED_DEP,
   throwOutdatedRequest,
@@ -506,14 +506,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.`,
               )
             }
 
diff --git a/packages/vite/src/node/server/middlewares/transform.ts b/packages/vite/src/node/server/middlewares/transform.ts
index 0e83f997c9c892..ccfd8daaaba4a8 100644
--- a/packages/vite/src/node/server/middlewares/transform.ts
+++ b/packages/vite/src/node/server/middlewares/transform.ts
@@ -36,6 +36,7 @@ import {
   ERR_OUTDATED_OPTIMIZED_DEP,
 } from '../../plugins/optimizedDeps'
 import { getDepsOptimizer } from '../../optimizer'
+import { urlRE } from '../../plugins/asset'
 
 const debugCache = createDebugger('vite:cache')
 
@@ -135,14 +136,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` +
diff --git a/playground/assets/__tests__/assets.spec.ts b/playground/assets/__tests__/assets.spec.ts
index ddc2d28d270999..7bf762483aea48 100644
--- a/playground/assets/__tests__/assets.spec.ts
+++ b/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', () => {
diff --git a/playground/assets/index.html b/playground/assets/index.html
index 5b30b733c2f9c9..463c8d6cb17022 100644
--- a/playground/assets/index.html
+++ b/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>
@@ -377,6 +381,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'
diff --git a/playground/assets/static/foo.json b/playground/assets/static/foo.json
new file mode 100644
index 00000000000000..c8c4105eb57cda
--- /dev/null
+++ b/playground/assets/static/foo.json
@@ -0,0 +1,3 @@
+{
+  "foo": "bar"
+}