From e404a699f48ae5c5a5da947f42679343192158c7 Mon Sep 17 00:00:00 2001
From: Artyom Tuchkov <throwget@gmail.com>
Date: Tue, 11 Jul 2023 13:38:27 +0300
Subject: [PATCH] fix(compiler-sfc): handle dynamic directive arguments in
 template usage check (#8538)

close #8537
---
 .../__snapshots__/compileScript.spec.ts.snap  | 15 +++++++++++++++
 .../__tests__/compileScript.spec.ts           | 19 +++++++++++++++++++
 .../src/script/importUsageCheck.ts            |  6 ++++++
 3 files changed, 40 insertions(+)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index de19ec5aaf..b7925ada89 100644
--- 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 57c3adfc3a..0723bd0a20 100644
--- 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 28456a45bb..7019dcf231 100644
--- 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,
-- 
2.47.3