fix(compiler-sfc): handle dynamic directive arguments in template usage check (#8538)

close #8537

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index de19ec5aaf29d12e200501fb31b3700581f3f131..b7925ada895634ceadf6a398dece50b22deff531 100644 (file)
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -745,6 +745,21 @@ return { get vMyDir() { return vMyDir } }
 })"
 `;
 
+exports[`SFC compile <script setup> > dev mode import usage check > dynamic arguments 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { FooBar, foo, bar, unused } from './x'
+        
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose: __expose }) {
+  __expose();
+
+        
+return { get FooBar() { return FooBar }, get foo() { return foo }, get bar() { return bar } }
+}
+
+})"
+`;
+
 exports[`SFC compile <script setup> > dev mode import usage check > js template string interpolations 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 import { VAR, VAR2, VAR3 } from './x'

diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 57c3adfc3a0804bfe23e98876764ae1bd1151f01..0723bd0a20f45c4c9c74626ff665cb5f122fcdda 100644 (file)
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -413,6 +413,25 @@ describe('SFC compile <script setup>', () => {
       assertCode(content)
     })
 
+    test('dynamic arguments', () => {
+      const { content } = compile(`
+        <script setup lang="ts">
+        import { FooBar, foo, bar, unused } from './x'
+        </script>
+        <template>
+          <FooBar #[foo.slotName] />
+          <FooBar #unused />
+          <div :[bar.attrName]="15"></div>
+          <div unused="unused"></div>
+        </template>
+        `)
+      expect(content).toMatch(
+        `return { get FooBar() { return FooBar }, get foo() { return foo }, ` +
+          `get bar() { return bar } }`
+      )
+      assertCode(content)
+    })
+
     // https://github.com/vuejs/core/issues/4599
     test('attribute expressions', () => {
       const { content } = compile(`

diff --git a/packages/compiler-sfc/src/script/importUsageCheck.ts b/packages/compiler-sfc/src/script/importUsageCheck.ts
index 28456a45bbabde7fb1ad91b709a0b6179462e54a..7019dcf2312e839b626789ddac1106d59d7e79c0 100644 (file)
--- a/packages/compiler-sfc/src/script/importUsageCheck.ts
+++ b/packages/compiler-sfc/src/script/importUsageCheck.ts
@@ -50,6 +50,12 @@ function resolveTemplateUsageCheckString(sfc: SFCDescriptor) {
               if (!isBuiltInDirective(prop.name)) {
                 code += `,v${capitalize(camelize(prop.name))}`
               }
+              if (prop.arg && !(prop.arg as SimpleExpressionNode).isStatic) {
+                code += `,${processExp(
+                  (prop.arg as SimpleExpressionNode).content,
+                  prop.name
+                )}`
+              }
               if (prop.exp) {
                 code += `,${processExp(
                   (prop.exp as SimpleExpressionNode).content,