From 68eac643f907fb4d57bd25925a342692441b1d97 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Tue, 5 Jan 2021 12:32:01 -0500
Subject: [PATCH] fix: support aliases in html references

fix #1363
---
 .../playground/alias/__tests__/alias.spec.ts  |  4 +++
 packages/playground/alias/dir/from-html.js    |  1 +
 packages/playground/alias/index.html          |  5 +++-
 packages/playground/alias/vite.config.js      |  3 +-
 packages/vite/src/node/config.ts              |  3 +-
 packages/vite/src/node/server/index.ts        |  2 +-
 .../src/node/server/middlewares/static.ts     | 28 +++++++++++++++++--
 7 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 packages/playground/alias/dir/from-html.js

diff --git a/packages/playground/alias/__tests__/alias.spec.ts b/packages/playground/alias/__tests__/alias.spec.ts
index c8b12e251ce881..98bf8085e22dc3 100644
--- a/packages/playground/alias/__tests__/alias.spec.ts
+++ b/packages/playground/alias/__tests__/alias.spec.ts
@@ -17,3 +17,7 @@ test('regex', async () => {
 test('dependency', async () => {
   expect(await page.textContent('.dep')).toMatch('[success] out of root')
 })
+
+test('from html', async () => {
+  expect(await page.textContent('.from-html')).toMatch('[success] from html')
+})
diff --git a/packages/playground/alias/dir/from-html.js b/packages/playground/alias/dir/from-html.js
new file mode 100644
index 00000000000000..6470d6e79a2946
--- /dev/null
+++ b/packages/playground/alias/dir/from-html.js
@@ -0,0 +1 @@
+document.querySelector('.from-html').textContent = '[success] from html'
diff --git a/packages/playground/alias/index.html b/packages/playground/alias/index.html
index e3bc45fdcd99bb..6c4a257df8e0f5 100644
--- a/packages/playground/alias/index.html
+++ b/packages/playground/alias/index.html
@@ -4,6 +4,7 @@ <h1>Alias</h1>
 <p class="fs-dir"></p>
 <p class="regex"></p>
 <p class="dep"></p>
+<p class="from-html"></p>
 
 <script type="module">
   import { msg as fsMsg } from 'fs'
@@ -19,4 +20,6 @@ <h1>Alias</h1>
   text('.fs-dir', fsDirMsg)
   text('.regex', regexMsg + ' via regex')
   text('.dep', depMsg)
-</script>
\ No newline at end of file
+</script>
+
+<script type="module" src="/@/from-html.js"></script>
\ No newline at end of file
diff --git a/packages/playground/alias/vite.config.js b/packages/playground/alias/vite.config.js
index e2eda8e2d3806a..df8a6bf1ac4ba2 100644
--- a/packages/playground/alias/vite.config.js
+++ b/packages/playground/alias/vite.config.js
@@ -11,6 +11,7 @@ module.exports = {
     {
       find: /^regex\/(.*)/,
       replacement: `${path.resolve(__dirname, 'dir')}/$1`
-    }
+    },
+    { find: '/@', replacement: path.resolve(__dirname, 'dir') }
   ]
 }
diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts
index e1b8f9673a9ffa..fa0a6b66fb2895 100644
--- a/packages/vite/src/node/config.ts
+++ b/packages/vite/src/node/config.ts
@@ -96,7 +96,7 @@ export interface UserConfig {
 }
 
 export type ResolvedConfig = Readonly<
-  Omit<UserConfig, 'plugins' | 'assetsInclude'> & {
+  Omit<UserConfig, 'plugins' | 'alias' | 'assetsInclude'> & {
     configPath: string | undefined
     inlineConfig: UserConfig
     root: string
@@ -105,6 +105,7 @@ export type ResolvedConfig = Readonly<
     isProduction: boolean
     optimizeCacheDir: string | undefined
     env: Record<string, any>
+    alias: Alias[]
     plugins: readonly Plugin[]
     server: ServerOptions
     build: Required<BuildOptions>
diff --git a/packages/vite/src/node/server/index.ts b/packages/vite/src/node/server/index.ts
index c777706303934a..8a78a73bacf91d 100644
--- a/packages/vite/src/node/server/index.ts
+++ b/packages/vite/src/node/server/index.ts
@@ -303,7 +303,7 @@ export async function createServer(
 
   // serve static files
   app.use(rawFsStaticMiddleware())
-  app.use(serveStaticMiddleware(root))
+  app.use(serveStaticMiddleware(root, resolvedConfig))
 
   // spa fallback
   app.use(
diff --git a/packages/vite/src/node/server/middlewares/static.ts b/packages/vite/src/node/server/middlewares/static.ts
index 692af20d1a0a5d..9e65b9b3da10af 100644
--- a/packages/vite/src/node/server/middlewares/static.ts
+++ b/packages/vite/src/node/server/middlewares/static.ts
@@ -2,13 +2,17 @@ import os from 'os'
 import path from 'path'
 import sirv from 'sirv'
 import { Connect } from 'types/connect'
+import { ResolvedConfig } from '../..'
 import { FS_PREFIX } from '../../constants'
 import { cleanUrl, isImportRequest } from '../../utils'
-
 const sirvOptions = { dev: true, etag: true }
 
-export function serveStaticMiddleware(dir: string): Connect.NextHandleFunction {
+export function serveStaticMiddleware(
+  dir: string,
+  config?: ResolvedConfig
+): Connect.NextHandleFunction {
   const serve = sirv(dir, sirvOptions)
+
   return (req, res, next) => {
     const url = req.url!
 
@@ -25,6 +29,26 @@ export function serveStaticMiddleware(dir: string): Connect.NextHandleFunction {
       return next()
     }
 
+    // apply aliases to static requests as well
+    if (config) {
+      let redirected: string | undefined
+      for (const { find, replacement } of config.alias) {
+        const matches =
+          typeof find === 'string' ? url.startsWith(find) : find.test(url)
+        if (matches) {
+          redirected = url.replace(find, replacement)
+          break
+        }
+      }
+      if (redirected) {
+        // dir is pre-normalized to posix style
+        if (redirected.startsWith(dir)) {
+          redirected = redirected.slice(dir.length)
+        }
+        req.url = redirected
+      }
+    }
+
     serve(req, res, next)
   }
 }