fix(compiler-sfc): check source for user imported bindings

closes #6825
vuejs · Oct 5, 2022 · 5ad8f0c · 5ad8f0c
1 parent c454aa5
commit 5ad8f0c
Showing 1 changed file with 20 additions and 13 deletions.
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
@@ -128,6 +128,7 @@ export interface SFCScriptCompileOptions {
 export interface ImportBinding {
   isType: boolean
   imported: string
+  local: string
   source: string
   isFromSetup: boolean
   isUsedInTemplate: boolean
@@ -271,7 +272,6 @@ export function compileScript(
   const bindingMetadata: BindingMetadata = {}
   const helperImports: Set<string> = new Set()
   const userImports: Record<string, ImportBinding> = Object.create(null)
-  const userImportAlias: Record<string, string> = Object.create(null)
   const scriptBindings: Record<string, BindingTypes> = Object.create(null)
   const setupBindings: Record<string, BindingTypes> = Object.create(null)
 
@@ -361,10 +361,6 @@ export function compileScript(
     isFromSetup: boolean,
     needTemplateUsageCheck: boolean
   ) {
-    if (source === 'vue' && imported) {
-      userImportAlias[imported] = local
-    }
-
     // template usage check is only needed in non-inline mode, so we can skip
     // the work if inlineTemplate is true.
     let isUsedInTemplate = needTemplateUsageCheck
@@ -381,6 +377,7 @@ export function compileScript(
     userImports[local] = {
       isType,
       imported: imported || 'default',
+      local,
       source,
       isFromSetup,
       isUsedInTemplate
@@ -918,7 +915,7 @@ export function compileScript(
           }
         }
         if (node.declaration) {
-          walkDeclaration(node.declaration, scriptBindings, userImportAlias)
+          walkDeclaration(node.declaration, scriptBindings, userImports)
         }
       } else if (
         (node.type === 'VariableDeclaration' ||
@@ -927,7 +924,7 @@ export function compileScript(
           node.type === 'TSEnumDeclaration') &&
         !node.declare
       ) {
-        walkDeclaration(node, scriptBindings, userImportAlias)
+        walkDeclaration(node, scriptBindings, userImports)
       }
     }
 
@@ -1127,7 +1124,7 @@ export function compileScript(
         node.type === 'ClassDeclaration') &&
       !node.declare
     ) {
-      walkDeclaration(node, setupBindings, userImportAlias)
+      walkDeclaration(node, setupBindings, userImports)
     }
 
     // walk statements & named exports / variable declarations for top level
@@ -1582,8 +1579,17 @@ function registerBinding(
 function walkDeclaration(
   node: Declaration,
   bindings: Record<string, BindingTypes>,
-  userImportAlias: Record<string, string>
+  userImports: Record<string, ImportBinding>
 ) {
+  function getUserBinding(name: string) {
+    const binding = Object.values(userImports).find(
+      binding => binding.source === 'vue' && binding.imported === name
+    )
+    if (binding) return binding.local
+    else if (!userImports[name]) return name
+    return undefined
+  }
+
   if (node.type === 'VariableDeclaration') {
     const isConst = node.kind === 'const'
     // export const foo = ...
@@ -1597,7 +1603,7 @@ function walkDeclaration(
       )
       if (id.type === 'Identifier') {
         let bindingType
-        const userReactiveBinding = userImportAlias['reactive'] || 'reactive'
+        const userReactiveBinding = getUserBinding('reactive')
         if (isCallOf(init, userReactiveBinding)) {
           // treat reactive() calls as let since it's meant to be mutable
           bindingType = isConst
@@ -1613,7 +1619,7 @@ function walkDeclaration(
             ? BindingTypes.SETUP_REACTIVE_CONST
             : BindingTypes.SETUP_CONST
         } else if (isConst) {
-          if (isCallOf(init, userImportAlias['ref'] || 'ref')) {
+          if (isCallOf(init, getUserBinding('ref'))) {
             bindingType = BindingTypes.SETUP_REF
           } else {
             bindingType = BindingTypes.SETUP_MAYBE_REF
@@ -1910,10 +1916,11 @@ function genRuntimeEmits(emits: Set<string>) {
 
 function isCallOf(
   node: Node | null | undefined,
-  test: string | ((id: string) => boolean)
+  test: string | ((id: string) => boolean) | null | undefined
 ): node is CallExpression {
   return !!(
     node &&
+    test &&
     node.type === 'CallExpression' &&
     node.callee.type === 'Identifier' &&
     (typeof test === 'string'
@@ -1922,7 +1929,7 @@ function isCallOf(
   )
 }
 
-function canNeverBeRef(node: Node, userReactiveImport: string): boolean {
+function canNeverBeRef(node: Node, userReactiveImport?: string): boolean {
   if (isCallOf(node, userReactiveImport)) {
     return true
   }