fix(hmr): fix hot.accept() module resolution (#97)

vitejs · May 9, 2020 · 7ffa9c0 · 7ffa9c0
1 parent b7f5ad2
commit 7ffa9c0
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 29 deletions.
diff --git a/src/node/server/serverPluginHmr.ts b/src/node/server/serverPluginHmr.ts
@@ -36,11 +36,12 @@ import chalk from 'chalk'
 import hash_sum from 'hash-sum'
 import { SFCBlock } from '@vue/compiler-sfc'
 import { parseSFC, vueCache, srcImportMap } from './serverPluginVue'
-import { cachedRead } from '../utils'
+import { cachedRead, resolveImport } from '../utils'
 import { FSWatcher } from 'chokidar'
 import MagicString from 'magic-string'
 import { parse } from '@babel/parser'
 import { StringLiteral, Statement, Expression } from '@babel/types'
+import { InternalResolver } from '../resolver'
 
 export const debugHmr = require('debug')('vite:hmr')
 
@@ -335,6 +336,7 @@ export function ensureMapEntry(map: HMRStateMap, key: string): Set<string> {
 export function rewriteFileWithHMR(
   source: string,
   importer: string,
+  resolver: InternalResolver,
   s: MagicString
 ) {
   const ast = parse(source, {
@@ -351,7 +353,11 @@ export function rewriteFileWithHMR(
 
   const registerDep = (e: StringLiteral) => {
     const deps = ensureMapEntry(hmrAcceptanceMap, importer)
-    const depPublicPath = slash(path.resolve(path.dirname(importer), e.value))
+    const depPublicPath = slash(
+      path.isAbsolute(e.value)
+        ? e.value
+        : resolveImport({ importer, id: e.value, resolver })
+    )
     deps.add(depPublicPath)
     debugHmr(`        ${importer} accepts ${depPublicPath}`)
     s.overwrite(e.start!, e.end!, JSON.stringify(depPublicPath))

diff --git a/src/node/server/serverPluginModuleRewrite.ts b/src/node/server/serverPluginModuleRewrite.ts
@@ -18,12 +18,7 @@ import {
   hmrClientPublicPath,
   hmrClientId
 } from './serverPluginHmr'
-import {
-  readBody,
-  cleanUrl,
-  isExternalUrl,
-  resolveRelativeRequest
-} from '../utils'
+import { readBody, cleanUrl, isExternalUrl, resolveImport } from '../utils'
 import chalk from 'chalk'
 
 const debug = require('debug')('vite:rewrite')
@@ -181,31 +176,12 @@ function rewriteImports(
             if (!/.vue$|.vue\?type=/.test(importer)) {
               // the user explicit imports the HMR API in a js file
               // making the module hot.
-              rewriteFileWithHMR(source, importer, s)
+              rewriteFileWithHMR(source, importer, resolver, s)
               // we rewrite the hot.accept call
               hasReplaced = true
             }
-          } else if (/^[^\/\.]/.test(id)) {
-            resolved = resolver.idToRequest(id) || `/@modules/${id}`
           } else {
-            let { pathname, query } = resolveRelativeRequest(importer, id)
-            // append .js or .ts for extension-less imports
-            // for now we don't attemp to resolve other extensions
-            if (!/\.\w+$/.test(pathname)) {
-              const file = resolver.requestToFile(pathname)
-              const indexMatch = file.match(/\/index\.\w+$/)
-              if (indexMatch) {
-                pathname = pathname.replace(/\/(index)?$/, '') + indexMatch[0]
-              } else {
-                pathname += path.extname(file)
-              }
-            }
-            // force re-fetch all imports by appending timestamp
-            // if this is a hmr refresh request
-            if (timestamp) {
-              query += `${query ? `&` : `?`}t=${timestamp}`
-            }
-            resolved = pathname + query
+            resolved = resolveImport({ importer, id, resolver, timestamp })
           }
 
           if (resolved !== id) {

diff --git a/src/node/utils/pathUtils.ts b/src/node/utils/pathUtils.ts
@@ -1,6 +1,7 @@
 import { Context } from 'koa'
 import path from 'path'
 import slash from 'slash'
+import { InternalResolver } from '../resolver'
 
 export const queryRE = /\?.*$/
 export const hashRE = /\#.*$/
@@ -48,3 +49,40 @@ export const isImportRequest = (ctx: Context): boolean => {
   const referer = ctx.get('referer').replace(timeStampRE, '')
   return jsSrcFileRE.test(referer)
 }
+
+const moduleRE = /^[^\/\.]/
+const fileExtensionRE = /\.\w+$/
+
+export const resolveImport = ({
+  importer,
+  id,
+  resolver,
+  timestamp
+}: {
+  importer: string
+  id: string
+  resolver: InternalResolver
+  timestamp?: string
+}): string => {
+  if (moduleRE.test(id)) {
+    return resolver ? resolver.idToRequest(id) || `/@modules/${id}` : id
+  } else {
+    let { pathname, query } = resolveRelativeRequest(importer, id)
+    // append an extension to extension-less imports
+    if (!fileExtensionRE.test(pathname)) {
+      const file = resolver.requestToFile(pathname)
+      const indexMatch = file.match(/\/index\.\w+$/)
+      if (indexMatch) {
+        pathname = pathname.replace(/\/(index)?$/, '') + indexMatch[0]
+      } else {
+        pathname += path.extname(file)
+      }
+    }
+    // force re-fetch all imports by appending timestamp
+    // if this is a hmr refresh request
+    if (timestamp) {
+      query += `${query ? `&` : `?`}t=${timestamp}`
+    }
+    return pathname + query
+  }
+}