From 3c54559d7684b42b909792f28f8221862c63a40e Mon Sep 17 00:00:00 2001
From: edison1105 <daiwei521@126.com>
Date: Sat, 28 Oct 2023 15:47:31 +0800
Subject: [PATCH 1/6] fix(compiler-sfc): properly handle dynamic directive
 arguments usage check

---
 packages/compiler-sfc/src/script/importUsageCheck.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/compiler-sfc/src/script/importUsageCheck.ts b/packages/compiler-sfc/src/script/importUsageCheck.ts
index f3c3932d829..9b79b2fe7d9 100644
--- a/packages/compiler-sfc/src/script/importUsageCheck.ts
+++ b/packages/compiler-sfc/src/script/importUsageCheck.ts
@@ -53,7 +53,7 @@ function resolveTemplateUsageCheckString(sfc: SFCDescriptor) {
               if (prop.arg && !(prop.arg as SimpleExpressionNode).isStatic) {
                 code += `,${processExp(
                   (prop.arg as SimpleExpressionNode).content,
-                  prop.name
+                  'bind'
                 )}`
               }
               if (prop.exp) {

From 5c7ba7710ffbb30a71834d03e20d8803df62a8c4 Mon Sep 17 00:00:00 2001
From: edison1105 <daiwei521@126.com>
Date: Sat, 28 Oct 2023 15:57:14 +0800
Subject: [PATCH 2/6] test: add test case

---
 packages/compiler-sfc/__tests__/compileScript.spec.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 75289d21ee2..dd92f0786bd 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -383,6 +383,7 @@ describe('SFC compile <script setup>', () => {
           <FooBar #unused />
           <div :[bar.attrName]="15"></div>
           <div unused="unused"></div>
+          <div #[\`item\${item.key}\`]="{ value }"></div>
         </template>
         `)
       expect(content).toMatch(

From 1f581b79ecc6642c8966fa38634aa6d5c115e4bc Mon Sep 17 00:00:00 2001
From: edison <daiwei521@126.com>
Date: Sun, 29 Oct 2023 08:40:53 +0800
Subject: [PATCH 3/6] Update importUsageCheck.ts

---
 packages/compiler-sfc/src/script/importUsageCheck.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/compiler-sfc/src/script/importUsageCheck.ts b/packages/compiler-sfc/src/script/importUsageCheck.ts
index 9b79b2fe7d9..a49bc17eb7d 100644
--- a/packages/compiler-sfc/src/script/importUsageCheck.ts
+++ b/packages/compiler-sfc/src/script/importUsageCheck.ts
@@ -50,12 +50,15 @@ function resolveTemplateUsageCheckString(sfc: SFCDescriptor) {
               if (!isBuiltInDirective(prop.name)) {
                 code += `,v${capitalize(camelize(prop.name))}`
               }
+              
+              //  process dynamic directive arguments as bind
               if (prop.arg && !(prop.arg as SimpleExpressionNode).isStatic) {
                 code += `,${processExp(
                   (prop.arg as SimpleExpressionNode).content,
                   'bind'
                 )}`
               }
+              
               if (prop.exp) {
                 code += `,${processExp(
                   (prop.exp as SimpleExpressionNode).content,

From 0865d01020f8072e7f097fad6a1b2b99e7bd60a6 Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Sun, 29 Oct 2023 00:41:53 +0000
Subject: [PATCH 4/6] [autofix.ci] apply automated fixes

---
 packages/compiler-sfc/src/script/importUsageCheck.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/compiler-sfc/src/script/importUsageCheck.ts b/packages/compiler-sfc/src/script/importUsageCheck.ts
index a49bc17eb7d..34722b81b5d 100644
--- a/packages/compiler-sfc/src/script/importUsageCheck.ts
+++ b/packages/compiler-sfc/src/script/importUsageCheck.ts
@@ -50,7 +50,7 @@ function resolveTemplateUsageCheckString(sfc: SFCDescriptor) {
               if (!isBuiltInDirective(prop.name)) {
                 code += `,v${capitalize(camelize(prop.name))}`
               }
-              
+
               //  process dynamic directive arguments as bind
               if (prop.arg && !(prop.arg as SimpleExpressionNode).isStatic) {
                 code += `,${processExp(
@@ -58,7 +58,7 @@ function resolveTemplateUsageCheckString(sfc: SFCDescriptor) {
                   'bind'
                 )}`
               }
-              
+
               if (prop.exp) {
                 code += `,${processExp(
                   (prop.exp as SimpleExpressionNode).content,

From 75674d8e1c38c362a45c0e4b05e17efc15a64f7c Mon Sep 17 00:00:00 2001
From: edison1105 <daiwei521@126.com>
Date: Sat, 4 Nov 2023 11:00:08 +0800
Subject: [PATCH 5/6] chore: improve code

---
 packages/compiler-sfc/__tests__/compileScript.spec.ts | 2 +-
 packages/compiler-sfc/src/script/importUsageCheck.ts  | 7 +++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index dd92f0786bd..502faeb6080 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -383,7 +383,7 @@ describe('SFC compile <script setup>', () => {
           <FooBar #unused />
           <div :[bar.attrName]="15"></div>
           <div unused="unused"></div>
-          <div #[\`item\${item.key}\`]="{ value }"></div>
+          <div #[\`item:\${item.key}\`]="{ value }"></div>
         </template>
         `)
       expect(content).toMatch(
diff --git a/packages/compiler-sfc/src/script/importUsageCheck.ts b/packages/compiler-sfc/src/script/importUsageCheck.ts
index 34722b81b5d..a7e2e6f3565 100644
--- a/packages/compiler-sfc/src/script/importUsageCheck.ts
+++ b/packages/compiler-sfc/src/script/importUsageCheck.ts
@@ -51,11 +51,10 @@ function resolveTemplateUsageCheckString(sfc: SFCDescriptor) {
                 code += `,v${capitalize(camelize(prop.name))}`
               }
 
-              //  process dynamic directive arguments as bind
+              // process dynamic directive arguments
               if (prop.arg && !(prop.arg as SimpleExpressionNode).isStatic) {
-                code += `,${processExp(
-                  (prop.arg as SimpleExpressionNode).content,
-                  'bind'
+                code += `,${stripStrings(
+                  (prop.arg as SimpleExpressionNode).content
                 )}`
               }
 

From d0c649007f90c6d0509798a67e5a0e71dc189e1d Mon Sep 17 00:00:00 2001
From: edison1105 <daiwei521@126.com>
Date: Sat, 4 Nov 2023 11:08:30 +0800
Subject: [PATCH 6/6] test: update test case

---
 .../__tests__/__snapshots__/compileScript.spec.ts.snap      | 4 ++--
 packages/compiler-sfc/__tests__/compileScript.spec.ts       | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 949c9946d9f..073874363b8 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -696,14 +696,14 @@ 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'
+import { FooBar, foo, bar, unused, baz } from './x'
         
 export default /*#__PURE__*/_defineComponent({
   setup(__props, { expose: __expose }) {
   __expose();
 
         
-return { get FooBar() { return FooBar }, get foo() { return foo }, get bar() { return bar } }
+return { get FooBar() { return FooBar }, get foo() { return foo }, get bar() { return bar }, get baz() { return baz } }
 }
 
 })"
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 502faeb6080..312e93fccbe 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -376,19 +376,19 @@ describe('SFC compile <script setup>', () => {
     test('dynamic arguments', () => {
       const { content } = compile(`
         <script setup lang="ts">
-        import { FooBar, foo, bar, unused } from './x'
+        import { FooBar, foo, bar, unused, baz } from './x'
         </script>
         <template>
           <FooBar #[foo.slotName] />
           <FooBar #unused />
           <div :[bar.attrName]="15"></div>
           <div unused="unused"></div>
-          <div #[\`item:\${item.key}\`]="{ value }"></div>
+          <div #[\`item:\${baz.key}\`]="{ value }"></div>
         </template>
         `)
       expect(content).toMatch(
         `return { get FooBar() { return FooBar }, get foo() { return foo }, ` +
-          `get bar() { return bar } }`
+          `get bar() { return bar }, get baz() { return baz } }`
       )
       assertCode(content)
     })