feat: detect $slots usages in template (#26)

Author: farnabaz

src/utils/parseTemplate.ts

@@ -2,6 +2,7 @@ import type { SFCDescriptor } from '@vue/compiler-sfc'
 import { compileTemplate } from '@vue/compiler-sfc'
 
 export function parseTemplate (id: string, descriptor: SFCDescriptor) {
+  const slots = []
   if (!descriptor.template) {
     return {
       slots: []
@@ -25,7 +26,21 @@ export function parseTemplate (id: string, descriptor: SFCDescriptor) {
     ]
   }
 
+  // Detect `$slots` usage
+  const $slots = template.source.matchAll(/\$slots(\.([-_\w]+)|\[['"]([-_\w]+)['"]\])/g)
+  let $slot = $slots.next()
+  while (!$slot.done) {
+    slots.push({
+      name: $slot.value[2] || $slot.value[3]
+    })
+    $slot = $slots.next()
+  }
+
+  // Detect `<slot>` usage
+  const slotsAst = findSlots(template.ast.children)
+  slots.push(...slotsAst)
+
   return {
-    slots: findSlots(template.ast?.children || [])
+    slots
   }
 }

test/basic-component.test.ts

@@ -11,6 +11,8 @@ describe('Basic Component', async () => {
 
   test('Slots', () => {
     expect(slots).toEqual([
+      { name: 'variable' },
+      { name: 'foo-bar' },
       { name: 'default' },
       { name: 'nuxt' }
     ])

test/fixtures/basic/components/BasicComponent.vue

@@ -3,6 +3,9 @@
     <slot />
     <hr>
     <slot name="nuxt" />
+
+    <SomeComponent :prop="$slots.variable" />
+    <SomeComponent :prop="$slots['foo-bar']" />
   </div>
 </template>