fix(compiler-sfc): named imports from .vue file should not be treated…

… as constant fix #2699
vuejs · Dec 1, 2020 · 085bbd5 · 085bbd5
1 parent f2b0a8e
commit 085bbd5
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -195,10 +195,10 @@ return { ref }
 `;
 
 exports[`SFC compile <script setup> inlineTemplate mode avoid unref() when necessary 1`] = `
-"import { createVNode as _createVNode, toDisplayString as _toDisplayString, unref as _unref, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
+"import { unref as _unref, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, withCtx as _withCtx, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock } from \\"vue\\"
 
 import { ref } from 'vue'
-        import Foo from './Foo.vue'
+        import Foo, { bar } from './Foo.vue'
         import other from './util'
         
 export default {
@@ -213,7 +213,12 @@ export default {
         
 return (_ctx, _cache) => {
   return (_openBlock(), _createBlock(_Fragment, null, [
-    _createVNode(Foo),
+    _createVNode(Foo, null, {
+      default: _withCtx(() => [
+        _createTextVNode(_toDisplayString(_unref(bar)), 1 /* TEXT */)
+      ]),
+      _: 1 /* STABLE */
+    }),
     _createVNode(\\"div\\", { onClick: fn }, _toDisplayString(count.value) + \\" \\" + _toDisplayString(constant) + \\" \\" + _toDisplayString(_unref(maybe)) + \\" \\" + _toDisplayString(_unref(lett)) + \\" \\" + _toDisplayString(_unref(other)), 1 /* TEXT */)
   ], 64 /* STABLE_FRAGMENT */))
 }

diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -217,7 +217,7 @@ const myEmit = defineEmit(['foo', 'bar'])
       const { content } = compile(
         `<script setup>
         import { ref } from 'vue'
-        import Foo from './Foo.vue'
+        import Foo, { bar } from './Foo.vue'
         import other from './util'
         const count = ref(0)
         const constant = {}
@@ -226,14 +226,16 @@ const myEmit = defineEmit(['foo', 'bar'])
         function fn() {}
         </script>
         <template>
-          <Foo/>
+          <Foo>{{ bar }}</Foo>
           <div @click="fn">{{ count }} {{ constant }} {{ maybe }} {{ lett }} {{ other }}</div>
         </template>
         `,
         { inlineTemplate: true }
       )
       // no need to unref vue component import
-      expect(content).toMatch(`createVNode(Foo)`)
+      expect(content).toMatch(`createVNode(Foo,`)
+      // #2699 should unref named imports from .vue
+      expect(content).toMatch(`unref(bar)`)
       // should unref other imports
       expect(content).toMatch(`unref(other)`)
       // no need to unref constant literals

diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
@@ -168,7 +168,7 @@ export function compileScript(
     string,
     {
       isType: boolean
-      imported: string | null
+      imported: string
       source: string
     }
   > = Object.create(null)
@@ -246,7 +246,7 @@ export function compileScript(
     }
     userImports[local] = {
       isType,
-      imported: imported || null,
+      imported: imported || 'default',
       source
     }
   }
@@ -807,10 +807,12 @@ export function compileScript(
   for (const key in typeDeclaredProps) {
     bindingMetadata[key] = BindingTypes.PROPS
   }
-  for (const [key, { isType, source }] of Object.entries(userImports)) {
+  for (const [key, { isType, imported, source }] of Object.entries(
+    userImports
+  )) {
     if (isType) continue
     bindingMetadata[key] =
-      source.endsWith('.vue') || source === 'vue'
+      (imported === 'default' && source.endsWith('.vue')) || source === 'vue'
         ? BindingTypes.SETUP_CONST
         : BindingTypes.SETUP_MAYBE_REF
   }