fix(compile-sfc): analyze v-bind shorthand usage in template (#10518)

close #10515

diff --git a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/importUsageCheck.spec.ts.snap b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/importUsageCheck.spec.ts.snap
index 764d120a744639875a67b2a58f8e4b87e50866a8..722e3340a7443cec94d9d66c87a6f476f873a081 100644 (file)
--- a/packages/compiler-sfc/__tests__/compileScript/__snapshots__/importUsageCheck.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/compileScript/__snapshots__/importUsageCheck.spec.ts.snap
@@ -66,14 +66,14 @@ return { get vMyDir() { return vMyDir } }
 
 exports[`dynamic arguments 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
-import { FooBar, foo, bar, unused, baz } from './x'
+import { FooBar, foo, bar, unused, baz, msg } from './x'
     
 export default /*#__PURE__*/_defineComponent({
   setup(__props, { expose: __expose }) {
   __expose();
 
     
-return { get FooBar() { return FooBar }, get foo() { return foo }, get bar() { return bar }, get baz() { return baz } }
+return { get FooBar() { return FooBar }, get foo() { return foo }, get bar() { return bar }, get baz() { return baz }, get msg() { return msg } }
 }
 
 })"

diff --git a/packages/compiler-sfc/__tests__/compileScript/importUsageCheck.spec.ts b/packages/compiler-sfc/__tests__/compileScript/importUsageCheck.spec.ts
index d9fd1dfe52967b253a82140c9c8f1dd5a2c0df5a..b842f7a466dee7c0d5a2962139b5436c0df4f856 100644 (file)
--- a/packages/compiler-sfc/__tests__/compileScript/importUsageCheck.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript/importUsageCheck.spec.ts
@@ -45,7 +45,7 @@ test('directive', () => {
 test('dynamic arguments', () => {
   const { content } = compile(`
     <script setup lang="ts">
-    import { FooBar, foo, bar, unused, baz } from './x'
+    import { FooBar, foo, bar, unused, baz, msg } from './x'
     </script>
     <template>
       <FooBar #[foo.slotName] />
@@ -53,11 +53,12 @@ test('dynamic arguments', () => {
       <div :[bar.attrName]="15"></div>
       <div unused="unused"></div>
       <div #[\`item:\${baz.key}\`]="{ value }"></div>
+      <FooBar :msg />
     </template>
     `)
   expect(content).toMatch(
     `return { get FooBar() { return FooBar }, get foo() { return foo }, ` +
-      `get bar() { return bar }, get baz() { return baz } }`,
+      `get bar() { return bar }, get baz() { return baz }, get msg() { return msg } }`,
   )
   assertCode(content)
 })

diff --git a/packages/compiler-sfc/src/script/importUsageCheck.ts b/packages/compiler-sfc/src/script/importUsageCheck.ts
index 211efc4908951f7a8ad931368106d95956117fbd..6b9fbc634ccb29f41369896211fccc016ab075e3 100644 (file)
--- a/packages/compiler-sfc/src/script/importUsageCheck.ts
+++ b/packages/compiler-sfc/src/script/importUsageCheck.ts
@@ -60,6 +60,9 @@ function resolveTemplateUsedIdentifiers(sfc: SFCDescriptor): Set<string> {
               extractIdentifiers(ids, prop.forParseResult!.source)
             } else if (prop.exp) {
               extractIdentifiers(ids, prop.exp)
+            } else if (prop.name === 'bind' && !prop.exp) {
+              // v-bind shorthand name as identifier
+              ids.add((prop.arg as SimpleExpressionNode).content)
             }
           }
           if (