From 946d0008690c1c4f713f2156eecddb20117828a8 Mon Sep 17 00:00:00 2001
From: Ahad Birang <farnabaz@gmail.com>
Date: Fri, 15 Jul 2022 16:00:24 +0200
Subject: [PATCH 1/2] feat: detect `$slots` usages in template

---
 src/utils/parseTemplate.ts                      | 17 ++++++++++++++++-
 test/basic-component.test.ts                    |  1 +
 .../basic/components/BasicComponent.vue         |  2 ++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/utils/parseTemplate.ts b/src/utils/parseTemplate.ts
index 2cfda45..4cc96fd 100644
--- a/src/utils/parseTemplate.ts
+++ b/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]+)/g)
+  let $slot = $slots.next()
+  while (!$slot.done) {
+    slots.push({
+      name: $slot.value[1]
+    })
+    $slot = $slots.next()
+  }
+
+  // Detect `<slot>` usage
+  const slotsAst = findSlots(template.ast.children)
+  slots.push(...slotsAst)
+
   return {
-    slots: findSlots(template.ast?.children || [])
+    slots
   }
 }
diff --git a/test/basic-component.test.ts b/test/basic-component.test.ts
index c032c04..9f22f71 100644
--- a/test/basic-component.test.ts
+++ b/test/basic-component.test.ts
@@ -11,6 +11,7 @@ describe('Basic Component', async () => {
 
   test('Slots', () => {
     expect(slots).toEqual([
+      { name: 'variable' },
       { name: 'default' },
       { name: 'nuxt' }
     ])
diff --git a/test/fixtures/basic/components/BasicComponent.vue b/test/fixtures/basic/components/BasicComponent.vue
index ab53010..2ff18ab 100644
--- a/test/fixtures/basic/components/BasicComponent.vue
+++ b/test/fixtures/basic/components/BasicComponent.vue
@@ -3,6 +3,8 @@
     <slot />
     <hr>
     <slot name="nuxt" />
+
+    <SomeComponent :prop="$slots.variable" />
   </div>
 </template>
 

From 24d7684077ed037b8ffc7f318ab684a5fb2fb650 Mon Sep 17 00:00:00 2001
From: Ahad Birang <farnabaz@gmail.com>
Date: Mon, 18 Jul 2022 13:18:57 +0200
Subject: [PATCH 2/2] fix: detect bracket usage

---
 src/utils/parseTemplate.ts                        | 4 ++--
 test/basic-component.test.ts                      | 1 +
 test/fixtures/basic/components/BasicComponent.vue | 1 +
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/utils/parseTemplate.ts b/src/utils/parseTemplate.ts
index 4cc96fd..cacc45e 100644
--- a/src/utils/parseTemplate.ts
+++ b/src/utils/parseTemplate.ts
@@ -27,11 +27,11 @@ export function parseTemplate (id: string, descriptor: SFCDescriptor) {
   }
 
   // Detect `$slots` usage
-  const $slots = template.source.matchAll(/\$slots\.([-\w]+)/g)
+  const $slots = template.source.matchAll(/\$slots(\.([-_\w]+)|\[['"]([-_\w]+)['"]\])/g)
   let $slot = $slots.next()
   while (!$slot.done) {
     slots.push({
-      name: $slot.value[1]
+      name: $slot.value[2] || $slot.value[3]
     })
     $slot = $slots.next()
   }
diff --git a/test/basic-component.test.ts b/test/basic-component.test.ts
index 9f22f71..35650d1 100644
--- a/test/basic-component.test.ts
+++ b/test/basic-component.test.ts
@@ -12,6 +12,7 @@ describe('Basic Component', async () => {
   test('Slots', () => {
     expect(slots).toEqual([
       { name: 'variable' },
+      { name: 'foo-bar' },
       { name: 'default' },
       { name: 'nuxt' }
     ])
diff --git a/test/fixtures/basic/components/BasicComponent.vue b/test/fixtures/basic/components/BasicComponent.vue
index 2ff18ab..9428647 100644
--- a/test/fixtures/basic/components/BasicComponent.vue
+++ b/test/fixtures/basic/components/BasicComponent.vue
@@ -5,6 +5,7 @@
     <slot name="nuxt" />
 
     <SomeComponent :prop="$slots.variable" />
+    <SomeComponent :prop="$slots['foo-bar']" />
   </div>
 </template>