fix(compiler-sfc): fix dynamic directive arguments usage check for sl…

…ots (#9495) close #9493
vuejs · Nov 6, 2023 · b39fa1f · b39fa1f
1 parent 462aeb3
commit b39fa1f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git 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
@@ -376,18 +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:\${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)
     })

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