fix(compiler-sfc): fix template usage check edge case for v-slot dest…

…ructured default value (#12842) fix #12841
vuejs · Nov 9, 2022 · 5e3d4e9 · 5e3d4e9
1 parent 5aed733
commit 5e3d4e9
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
@@ -39,7 +39,7 @@ import { walk } from 'estree-walker'
 import { RawSourceMap } from 'source-map'
 import { warnOnce } from './warn'
 import { isReservedTag } from 'web/util'
-import { bindRE, dirRE, onRE } from 'compiler/parser'
+import { bindRE, dirRE, onRE, slotRE } from 'compiler/parser'
 import { parseText } from 'compiler/parser/text-parser'
 import { DEFAULT_FILENAME } from './parseComponent'
 import {
@@ -1804,6 +1804,8 @@ function resolveTemplateUsageCheckString(sfc: SFCDescriptor, isTS: boolean) {
         if (dirRE.test(name)) {
           const baseName = onRE.test(name)
             ? 'on'
+            : slotRE.test(name)
+            ? 'slot'
             : bindRE.test(name)
             ? 'bind'
             : name.replace(dirRE, '')

diff --git a/packages/compiler-sfc/test/compileScript.spec.ts b/packages/compiler-sfc/test/compileScript.spec.ts
@@ -1574,5 +1574,21 @@ describe('SFC analyze <script> bindings', () => {
       </template>
       `)
     })
+
+    // #12841
+    test('should not error when performing ts expression check for v-slot destructured default value', () => {
+      compile(`
+      <script setup lang="ts">
+        import FooComp from './Foo.vue'
+      </script>
+      <template>
+        <FooComp>
+          <template #bar="{ bar = { baz: '' } }">
+            {{ bar.baz }}
+          </template>
+        </FooComp>
+      </template>
+      `)
+    })
   })
 })
diff --git a/src/compiler/parser/index.ts b/src/compiler/parser/index.ts
@@ -42,7 +42,7 @@ export const bindRE = /^:|^\.|^v-bind:/
 const propBindRE = /^\./
 const modifierRE = /\.[^.\]]+(?=[^\]]*$)/g
 
-const slotRE = /^v-slot(:|$)|^#/
+export const slotRE = /^v-slot(:|$)|^#/
 
 const lineBreakRE = /[\r\n]/
 const whitespaceRE = /[ \f\t\r\n]+/g