feat: detect $slots.* usage in script (#31)

Author: farnabaz

src/utils/parseComponent.ts

@@ -8,21 +8,24 @@ export function parseComponent (name: string, source: string) {
   // Parse component source
   const { descriptor } = parse(source)
   let props: ComponentProp[] = []
+  let slots
 
   // Parse script
   if (descriptor.scriptSetup) {
     const setupScrip = parseSetupScript(name, descriptor)
     props = setupScrip.props
+    slots = setupScrip.slots
   } else if (descriptor.script) {
     const script = parseScript(name, descriptor)
     props = script.props
+    slots = script.slots
   }
 
-  const { slots } = parseTemplate(name, descriptor)
+  const template = parseTemplate(name, descriptor)
 
   return {
     name,
     props,
-    slots
+    slots: Array.from(new Set(template.slots.concat(slots)))
   }
 }

src/utils/parseScript.ts

@@ -2,11 +2,14 @@ import type { SFCDescriptor } from '@vue/compiler-sfc'
 import { compileScript } from '@vue/compiler-sfc'
 import { ComponentProp } from '../types'
 import { getType, getValue, visit } from './ast'
+import { findSlotUsage } from './source'
 
 export function parseScript (id: string, descriptor: SFCDescriptor) {
   const props: ComponentProp[] = []
   const script = compileScript(descriptor, { id })
 
+  const slots = findSlotUsage(script.content)
+
   visit(script.scriptAst, node => node.type === 'CallExpression' && node.callee?.name === 'defineComponent', (node) => {
     const nodeProps = node.arguments?.[0]?.properties?.find(prop => prop.key.name === 'props')
     if (!nodeProps) {
@@ -33,6 +36,7 @@ export function parseScript (id: string, descriptor: SFCDescriptor) {
   })
 
   return {
-    props
+    props,
+    slots
   }
 }

src/utils/parseSetupScript.ts

@@ -2,11 +2,14 @@ import type { SFCDescriptor } from '@vue/compiler-sfc'
 import { compileScript } from '@vue/compiler-sfc'
 import { ComponentProp } from '../types'
 import { getType, getValue, visit } from './ast'
+import { findSlotUsage } from './source'
 
 export function parseSetupScript (id: string, descriptor: SFCDescriptor) {
   const props: ComponentProp[] = []
   const script = compileScript(descriptor, { id })
 
+  const slots = findSlotUsage(script.content)
+
   visit(script.scriptSetupAst, node => node.type === 'CallExpression' && node.callee?.name === 'defineProps', (node) => {
     const properties = node.arguments[0]?.properties || []
     properties.reduce((props, p) => {
@@ -29,6 +32,7 @@ export function parseSetupScript (id: string, descriptor: SFCDescriptor) {
   })
 
   return {
-    props
+    props,
+    slots
   }
 }

src/utils/parseTemplate.ts

@@ -1,5 +1,6 @@
 import type { SFCDescriptor } from '@vue/compiler-sfc'
 import { compileTemplate } from '@vue/compiler-sfc'
+import { findSlotUsage } from './source'
 
 export function parseTemplate (id: string, descriptor: SFCDescriptor) {
   const slots = []
@@ -26,20 +27,14 @@ 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)
 
+  // Detect `$slots` usage
+  const slotUsages = findSlotUsage(template.source)
+  slots.push(...slotUsages)
+
   return {
     slots
   }

src/utils/source.ts

@@ -0,0 +1,16 @@
+/**
+ * find `$slots.*` usage in the source code
+ */
+export function findSlotUsage (source: string) {
+  const slots: any[] = []
+  // Detect `$slots` usage
+  const $slots = 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()
+  }
+  return slots
+}

test/basic-component.test.ts

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