fix: same src file request same key

ref: vitejs/vite@4c54800
unplugin · Jul 13, 2022 · ed1b4c1 · ed1b4c1
1 parent a06b1ba
commit ed1b4c1
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 16 deletions.
diff --git a/src/core/main.ts b/src/core/main.ts
@@ -223,6 +223,7 @@ async function genTemplateCode(
   ssr: boolean
 ) {
   const template = descriptor.template!
+  const hasScoped = descriptor.styles.some((style) => style.scoped)
 
   // If the template is not using pre-processor AND is not using external src,
   // compile and inline it directly in the main module. When served in vite this
@@ -237,12 +238,22 @@ async function genTemplateCode(
     )
   } else {
     if (template.src) {
-      await linkSrcToDescriptor(template.src, descriptor, pluginContext)
+      await linkSrcToDescriptor(
+        template.src,
+        descriptor,
+        pluginContext,
+        hasScoped
+      )
     }
     const src = template.src || descriptor.filename
-    const srcQuery = template.src ? `&src=${descriptor.id}` : ``
+    const srcQuery = template.src
+      ? hasScoped
+        ? `&src=${descriptor.id}`
+        : '&src=true'
+      : ''
+    const scopedQuery = hasScoped ? `&scoped=true` : ``
     const attrsQuery = attrsToQuery(template.attrs, 'js', true)
-    const query = `?vue&type=template${srcQuery}${attrsQuery}`
+    const query = `?vue&type=template${srcQuery}${scopedQuery}${attrsQuery}`
     const request = JSON.stringify(src + query)
     const renderFnName = ssr ? 'ssrRender' : 'render'
     return {
@@ -280,12 +291,12 @@ async function genScriptCode(
       map = script.map
     } else {
       if (script.src) {
-        await linkSrcToDescriptor(script.src, descriptor, pluginContext)
+        await linkSrcToDescriptor(script.src, descriptor, pluginContext, false)
       }
       const src = script.src || descriptor.filename
       const langFallback = (script.src && path.extname(src).slice(1)) || 'js'
       const attrsQuery = attrsToQuery(script.attrs, langFallback)
-      const srcQuery = script.src ? `&src=${descriptor.id}` : ``
+      const srcQuery = script.src ? `&src=true` : ``
       const query = `?vue&type=script${srcQuery}${attrsQuery}`
       const request = JSON.stringify(src + query)
       scriptCode =
@@ -310,13 +321,22 @@ async function genStyleCode(
     for (let i = 0; i < descriptor.styles.length; i++) {
       const style = descriptor.styles[i]
       if (style.src) {
-        await linkSrcToDescriptor(style.src, descriptor, pluginContext)
+        await linkSrcToDescriptor(
+          style.src,
+          descriptor,
+          pluginContext,
+          style.scoped
+        )
       }
       const src = style.src || descriptor.filename
       // do not include module in default query, since we use it to indicate
       // that the module needs to export the modules json
       const attrsQuery = attrsToQuery(style.attrs, 'css')
-      const srcQuery = style.src ? `&src=${descriptor.id}` : ``
+      const srcQuery = style.src
+        ? style.scoped
+          ? `&src=${descriptor.id}`
+          : '&src=true'
+        : ''
       const directQuery = asCustomElement ? `&inline` : ``
       const query = `?vue&type=style&index=${i}${srcQuery}${directQuery}`
       const styleRequest = src + query + attrsQuery
@@ -383,11 +403,11 @@ async function genCustomBlockCode(
   for (let index = 0; index < descriptor.customBlocks.length; index++) {
     const block = descriptor.customBlocks[index]
     if (block.src) {
-      await linkSrcToDescriptor(block.src, descriptor, pluginContext)
+      await linkSrcToDescriptor(block.src, descriptor, pluginContext, false)
     }
     const src = block.src || descriptor.filename
     const attrsQuery = attrsToQuery(block.attrs, block.type)
-    const srcQuery = block.src ? `&src` : ``
+    const srcQuery = block.src ? `&src=true` : ``
     const query = `?vue&type=${block.type}&index=${index}${srcQuery}${attrsQuery}`
     const request = JSON.stringify(src + query)
     code += `import block${index} from ${request}\n`
@@ -404,7 +424,8 @@ async function genCustomBlockCode(
 async function linkSrcToDescriptor(
   src: string,
   descriptor: SFCDescriptor,
-  pluginContext: UnpluginContext
+  pluginContext: UnpluginContext,
+  scoped?: boolean
 ) {
   // support rollup only
   if ((pluginContext as PluginContext).resolve) {
@@ -413,7 +434,7 @@ async function linkSrcToDescriptor(
         ?.id || src
     // #1812 if the src points to a dep file, the resolved id may contain a
     // version query.
-    setSrcDescriptor(srcFile.replace(/\?.*$/, ''), descriptor)
+    setSrcDescriptor(srcFile.replace(/\?.*$/, ''), descriptor, scoped)
   } else {
     // TODO: unplugin implements context.resolve()
     pluginContext.error(new Error('src attribute is supported on Rollup only.'))

diff --git a/src/core/utils/descriptorCache.ts b/src/core/utils/descriptorCache.ts
@@ -69,11 +69,22 @@ export function getSrcDescriptor(
   filename: string,
   query: VueQuery
 ): SFCDescriptor {
-  return cache.get(`${filename}?src=${query.src}`)!
+  if (query.scoped) {
+    return cache.get(`${filename}?src=${query.src}`)!
+  }
+  return cache.get(filename)!
 }
 
-export function setSrcDescriptor(filename: string, entry: SFCDescriptor): void {
-  // if multiple Vue files use the same src file, they will be overwritten
-  // should use other key
-  cache.set(`${filename}?src=${entry.id}`, entry)
+export function setSrcDescriptor(
+  filename: string,
+  entry: SFCDescriptor,
+  scoped?: boolean
+): void {
+  if (scoped) {
+    // if multiple Vue files use the same src file, they will be overwritten
+    // should use other key
+    cache.set(`${filename}?src=${entry.id}`, entry)
+    return
+  }
+  cache.set(filename, entry)
 }
diff --git a/src/core/utils/query.ts b/src/core/utils/query.ts
@@ -5,6 +5,7 @@ export interface VueQuery {
   index?: number
   lang?: string
   raw?: boolean
+  scoped?: boolean
 }
 
 export function parseVueRequest(id: string): {
@@ -22,6 +23,9 @@ export function parseVueRequest(id: string): {
   if (query.raw != null) {
     query.raw = true
   }
+  if (query.scoped != null) {
+    query.scoped = true
+  }
   return {
     filename,
     query,