fix(plugin-vue): ensure id on descriptor

Author: yyx990803

packages/playground/sfcs/PreProcessors.vue

@@ -9,15 +9,15 @@ p.pug-less
 </template>
 
 <style lang="scss">
-$color: red;
+$color: magenta;
 
 .pug {
   color: $color;
 }
 </style>
 
 <style lang="less" scoped>
-@preprocess-custom-color: blue;
+@preprocess-custom-color: green;
 
 .pug-less {
   color: @preprocess-custom-color;

packages/plugin-vue/src/handleHotUpdate.ts

@@ -1,13 +1,13 @@
 import fs from 'fs'
 import _debug from 'debug'
-import { parse, SFCBlock, SFCDescriptor } from '@vue/compiler-sfc'
+import { SFCBlock, SFCDescriptor } from '@vue/compiler-sfc'
 import {
+  createDescriptor,
   getDescriptor,
-  setDescriptor,
   setPrevDescriptor
 } from './utils/descriptorCache'
 import { getResolvedScript, setResolvedScript } from './script'
-import { ModuleNode } from 'vite'
+import { ModuleNode, ViteDevServer } from 'vite'
 
 const debug = _debug('vite:hmr')
 
@@ -16,7 +16,8 @@ const debug = _debug('vite:hmr')
  */
 export async function handleHotUpdate(
   file: string,
-  modules: ModuleNode[]
+  modules: ModuleNode[],
+  server: ViteDevServer
 ): Promise<ModuleNode[] | void> {
   if (!file.endsWith('.vue')) {
     return
@@ -34,12 +35,13 @@ export async function handleHotUpdate(
     content = fs.readFileSync(file, 'utf-8')
   }
 
-  const { descriptor } = parse(content, {
-    filename: file,
-    sourceMap: true
-  })
-  setDescriptor(file, descriptor)
   setPrevDescriptor(file, prevDescriptor)
+  const { descriptor } = createDescriptor(
+    file,
+    content,
+    server.config.root,
+    false
+  )
 
   let needRerender = false
   const affectedModules = new Set<ModuleNode | undefined>()

packages/plugin-vue/src/main.ts

@@ -1,14 +1,7 @@
-import hash from 'hash-sum'
-import path from 'path'
 import qs from 'querystring'
-import {
-  parse,
-  rewriteDefault,
-  SFCBlock,
-  SFCDescriptor
-} from '@vue/compiler-sfc'
+import { rewriteDefault, SFCBlock, SFCDescriptor } from '@vue/compiler-sfc'
 import { ResolvedOptions } from '.'
-import { getPrevDescriptor, setDescriptor } from './utils/descriptorCache'
+import { createDescriptor, getPrevDescriptor } from './utils/descriptorCache'
 import { PluginContext, TransformPluginContext } from 'rollup'
 import { resolveScript } from './script'
 import { transformTemplateInMain } from './template'
@@ -26,23 +19,13 @@ export async function transformMain(
 
   // prev descriptor is only set and used for hmr
   const prevDescriptor = getPrevDescriptor(filename)
-  const { descriptor, errors } = parse(code, {
-    sourceMap: true,
-    filename
-  })
-
-  // set the id on the descriptor
-  const shortFilePath = path
-    .relative(root, filename)
-    .replace(/^(\.\.[\/\\])+/, '')
-    .replace(/\\/g, '/')
-
-  descriptor.id = hash(
-    isProduction ? shortFilePath + '\n' + code : shortFilePath
+  const { descriptor, errors } = createDescriptor(
+    filename,
+    code,
+    root,
+    isProduction
   )
 
-  setDescriptor(filename, descriptor)
-
   if (errors.length) {
     errors.forEach((error) =>
       pluginContext.error(createRollupError(filename, error))
@@ -100,13 +83,9 @@ export async function transformMain(
       `_sfc_main.__scopeId = ${JSON.stringify(`data-v-${descriptor.id}`)}`
     )
   }
-  if (!isProduction) {
-    output.push(`_sfc_main.__file = ${JSON.stringify(shortFilePath)}`)
-  } else if (devServer) {
+  if (devServer) {
     // expose filename during serve for devtools to pickup
-    output.push(
-      `_sfc_main.__file = ${JSON.stringify(path.basename(shortFilePath))}`
-    )
+    output.push(`_sfc_main.__file = ${JSON.stringify(filename)}`)
   }
   output.push('export default _sfc_main')
 

packages/plugin-vue/src/utils/descriptorCache.ts

@@ -1,10 +1,29 @@
-import { SFCDescriptor } from '@vue/compiler-sfc'
+import path from 'path'
+import slash from 'slash'
+import hash from 'hash-sum'
+import { parse, SFCDescriptor } from '@vue/compiler-sfc'
 
 const cache = new Map<string, SFCDescriptor>()
 const prevCache = new Map<string, SFCDescriptor | undefined>()
 
-export function setDescriptor(filename: string, entry: SFCDescriptor) {
-  cache.set(filename, entry)
+export function createDescriptor(
+  filename: string,
+  source: string,
+  root: string,
+  isProduction: boolean | undefined
+) {
+  const { descriptor, errors } = parse(source, {
+    filename,
+    sourceMap: true
+  })
+
+  // ensure the path is normalized in a way that is consistent inside
+  // project (relative to root) and on different systems.
+  const normalizedPath = slash(path.normalize(path.relative(root, filename)))
+  descriptor.id = hash(normalizedPath + (isProduction ? source : ''))
+
+  cache.set(filename, descriptor)
+  return { descriptor, errors }
 }
 
 export function getPrevDescriptor(filename: string) {

packages/plugin-vue/src/utils/genId.ts

@@ -0,0 +1,17 @@
+import path from 'path'
+import slash from 'slash'
+import hash from 'hash-sum'
+import { SFCDescriptor } from '@vue/compiler-sfc'
+
+export function genScopeId(
+  descriptor: SFCDescriptor,
+  root: string,
+  isProduction = false
+) {
+  // ensure the path is normalized in a way that is consistent inside
+  // project (relative to root) and on different systems.
+  const normalizedPath = slash(
+    path.normalize(path.relative(root, descriptor.filename))
+  )
+  return hash(normalizedPath + (isProduction ? descriptor.source : ''))
+}